Quitter/Lien externe page de démarrage/chargement de page

Question

J'ai déjà vu sur des sites, lorsque vous cliquez sur un lien, il y a un fondu vers une page de chargement/page de démarrage, puis la nouvelle page apparaît. Malheureusement, je ne peux pas souvenez-vous où je l'ai vu, sinon je ne ferais que désirer le leur.

Quelqu'un connait un script jquery, mootools, ajax pour cela?

Merci!

Answer 1

Ce script va fondre votre conteneur de page et s'estomper dans la page de chargement (votre écran de démarrage). Une fois l'écran de démarrage chargé, il effectue une requête AJAX pour le contenu. Une fois terminé, il passe de l'écran d'accueil à la nouvelle 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 
      }); 
     }); 
    }); 
});​ 

Fiddlehttp://jsfiddle.net/4KRpE/

Answer 2

Quelque chose plus complexe fait avec 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(); 
     } 
    }); 
});​