Lorsque vous naviguez entre des pages Web, affichez une animation de sortie et préchargez la page suivante

Mon client souhaite une animation si vous allez de la page Web A à la page Web B. L'animation se trouve sur la page A (sa jquery/css).Lorsque vous naviguez entre des pages Web, affichez une animation de sortie et préchargez la page suivante

Ils veulent que l'animation se termine (prend ~ 900msecs) avant la page B montre.

Je veux utiliser le temps de passage (~ 900msecs) à pré-charge la page B.

De préférence, la page B est vraiment une autre page; pas quelque chose que je charge avec ajax et insérer dans le html dom. Donc idéalement, je précharge quelque chose et au moment où j'y vais, le webbrowser comprend qu'il peut utiliser la version préchargée sans faire de nouvelles requêtes http (pour la page html elle-même au moins). Je pourrais commencer à essayer des choses avec le cache de jquery; ou iframes; ou uris de données, et regarder de près les demandes http. Mais existe-t-il déjà des méthodes éprouvées et éprouvées?

Source

2015-03-10 commonpike

Ne peut le faire que sur la même page. Impossible de 'précharger' une nouvelle page – charlietfl

Vous pouvez cependant avoir une seule page d'application (SPA) qui fait le routage d'url côté client – charlietfl

Non, comme je l'ai mentionné, je ne veux pas de SPA. Si je ne peux pas le précharger complètement, au moins je peux optimiser la demande, par exemple en remplissant le cache du navigateur. – commonpike

YMMV, et certainement pas crossbrowsertested, mais vous pouvez apparemment juste charge ajax et remplacer le document actuel avec les données chargées: Replace current page with ajax content

donc .. la version lisible serait

var newpage = ''; 

function danceAndLoad(url) { 
    loadNewPage(url); 
    while (!newpage) dance(); 
    insertNewPage(); 
} 

function loadNewPage(url) { 
    $.ajax({ 
     url: url 
    }).done(function(data) { 

     // add a base href if needed 
     newpage=data.replace('<head>','<head><base href="'+canonize(url)+'/" />'); 

    }); 



} 

function insertNewPage() { 

    document.open(); 
    document.write(newpage); 
    document.close(); 

    // rewrite history if needed 
    var ttltag = data.substring(data.indexOf("<title"), data.indexOf("</title>") + 8); 
    var ttlm = /title>([^<]*)</gi.exec(ttltag); 
    var title = (ttlm)?ttlm[1]:''; 
    window.history.pushState(null, title, canonize(url)); 
    window.onpopstate=function(evt) { 
     document.location.reload() 
    }; 

}

Tous commentaires ou améliorations sont les bienvenus

Source

2015-04-06 21:43:46 commonpike

Lorsque vous naviguez entre des pages Web, affichez une animation de sortie et préchargez la page suivante

Répondre

Questions connexes