Exit / External Link splash page / page load

Question

Hi,

I've seen on sites before, when you click a link there is a fade to a loading page/splash page and then the new page fades in. Unfortunately, I can't remember where I saw this, otherwise I would just disect theirs.

Anyone know of a jquery, mootools, ajax script to do this?

Thanks!

Answer 1

This script will fade out your page container and fade in the loading page(your splash screen). Once the splash screen is loaded it makes an AJAX request for the content. On complete it fades from the splash screen to the new page.

$('#wrapperForThePage').click(function() {
    $('#wrapperForThePage').fadeOut(function() {
        $('#loadingSplash').fadeIn();
        $('#wrapperForThePage').load("yourpage.html", function() {
            $('#loadingSplash').fadeOut(function() {
                $('#wrapperForThePage').fadeIn(); // Called on complete, 404 or success
            });
        });
    });
});​

Fiddle http://jsfiddle.net/4KRpE/

Answer 2

Something more complex done with MooTools: http://www.jsfiddle.net/oskar/rDrtP/

var contentEl = $('content'),
    loaderEl = $('loader'),
    navEls = $$('#nav a');

var loadContent = function(){

    // fade out the container
    contentEl.fade('out');

    // show the loader
    loaderEl.set('opacity', 0).fade('in');

    // fetch the new content
    new Request.HTML({
        url: this.get('href'),
        onComplete: function(responseEls){

            // empty the previous content and inject the new one
            contentEl.empty().adopt(responseEls);

            // show the content
            contentEl.fade('in');

            // hide the loader
            loaderEl.fade('out');
        }
    }).post({
        html: '<strong>' + this.get('html') + '</strong>'
    });
};

navEls.each(function(nav){
    nav.addEvents({
        click: function(e){
            e.stop();

            // load new content when clicking the links
            loadContent.bind(this).run();
        }
    });
});​