When navigating between webpages, display an exit animation, and preload the next page

Question

My client wants an animation if you go from webpage A to webpage B. The animation is located on page A (its jquery/css).

They want the animation to finish (takes ~900msecs) before page B shows.

I want to use the passing time (~900msecs) to preload page B.

Preferably, page B really is a different page; not something I load with ajax and insert into the html dom. So ideally, I preload something and by the time I go there, the webbrowser understands it can use the preloaded version without doing any new http requests (for the html page itself at least).

I could start trying things with jquery's cache; or iframes; or data uris, and closely watch the http requests. But are there already tested and tried methods around ?

You can however have a single page app (SPA) that does client side url routing — charlietfl, Mar 10 '15 at 12:04
No, as I mentioned, I dont want it SPA. If I cant fully preload it, at least I can optimize the request eg by filling the browser cache. — commonpike, Mar 10 '15 at 12:15
The only acceptable spa solution would be to load an iframe and display it fullscreen at a certain moment, but i dislike that idea. — commonpike, Mar 10 '15 at 12:20
Why are you so against an SPA when it is the best solution for what your client is asking for? Huge apps get written in SPA's these days — charlietfl, Mar 10 '15 at 12:22
.. because of reasons. its part of the question, a non-spa solution please. — commonpike, Mar 10 '15 at 19:55
there isn't one that won't require putting the page into iframe or into the DOM but that won't stop browser making all the same requests and the time may not even be enough to get a lot of it cached — charlietfl, Mar 10 '15 at 19:59

score 0 · Answer 1 · edited May 23 '17 at 12:13

YMMV, and certainly not crossbrowsertested, but you can apparently just load ajax and replace the current document with the loaded data: Replace current page with ajax content

So .. the readable version would be

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()
    };

}

Any comments or improvements are welcome

When navigating between webpages, display an exit animation, and preload the next page

1 Answers1