Est-il possible d'utiliser jQuery pour créer une transition de page avec un div préchargé de sorte qu'il n'y ait pas de scintillement entre les charges?

Question

Voici la situation: Je travaille sur un site où la navigation se trouve au bas de la page sur la page d'accueil, mais en haut de la page pour toutes les autres pages. J'ai mis en place un certain jQuery de sorte que quand un lien est cliqué sur l'une des sous-pages, la navigation va glisser jusqu'à la position est située sur toutes les autres pages avant de passer à la page suivante (et fait également quelques petites tweaks pour le faire correspondre parfaitement). Tout ceci:

$('#nav a').click(function(){ 
    var url = $(this).attr('href'); //save the url 
    $('#top-container').removeClass('home-top-container'); //remove the special home page styles 
    $('img').slideUp('slow', function(){ //slide up the main image-- this places the nav at the exact position of all interior pages 
    document.location.href = url; //when it's finished, proceed to the page 
    }); 
    return false; 
}); 

Ce serait un parfait « look » à l'exception du fait que, bien sûr, il y a un peu de temps de chargement de page entre les transitions de page, de sorte que la navigation disparaît puis réapparaît pour une seconde, juste comme vous vous y attendriez. Mais c'est vraiment distrayant puisque votre œil est déjà concentré sur la navigation qui bouge juste. Donc, ce que je me demande, c'est s'il y a un moyen d'utiliser jQuery pour rechercher ce #nav div dans la page de destination et le précharger avant de passer à cette page (pour qu'il n'y ait pas de scintillement)? Ou tout autre moyen de garder le nav affichage sans interruption pendant la transition? J'ai le sentiment que je demande l'impossible. Mais cela vaut la peine de demander, au moins.

---

ETA: Voici un exemple de lien pour le site: http://www.studioal.com/sample/ Cliquez sur « TRAVAIL » (il est le seul lien de travail)

Je préfère ne pas se fanent dedans et dehors, comme je l'avais J'adore avoir la navigation à 100% tout au long de la transition (je pense que ce sera plus facile à comprendre une fois que l'on verra l'exemple).

Answer 1

Vous devez utiliser AJAX pour charger votre page en arrière-plan, puis supprimer le contenu actuel et supprimer le nouveau contenu chargé.