How to pre-load (cache) an external page in jquery before redirecting to it?

Question

I am doing a phonegap app. I have an index.html page with a sign-in button that redirects to the website app.

When sign-in button was clicked, I wanted to have a loa

Answer 1

This is very simple example:

http://jsfiddle.net/umidbek_karimov/DQ2wn/

Use css classes to manipulate visibility of the loader div and switch between pages.

jQuery(document).ready(function ($) {
    $app = $('.app'),
    $pages = $('.page');

    $('.login').on('click', function () {
        $app.addClass('loading');

        $pages.removeClass('active').filter('.page-2').addClass('active');

        setTimeout(function () {
            $app.removeClass('loading');
        }, 500);
    });

    $('.logout').on('click', function () {
        $app.addClass('loading');

        $pages.removeClass('active').filter('.page-1').addClass('active');

        setTimeout(function () {
            $app.removeClass('loading');
        }, 500);
    });

    $app.removeClass('loading');
});

But if you need more complicated solution it's better to use some js frameworks, Knockout.js + some js router, or more powerful Angular.JS

Answer 2

I accomplished a similar task using <iframe> elements. My phonegap app needed to load (local) pages, possibly modifying them via jQuery. Using plain redirects (via window.location) caused loading artifacts for two reasons:

1. images appeared as they were being loaded
2. the page state before jQuery modifications momentarily flashed.

I solved this problem by loading the page in a non-visible <iframe>, and making the <iframe> visible only after it had loaded and modifications had been made via jQuery. I supposed there are various ways to do this, but I did it by "juggling" <iframe> elements via their z-index.

I have created an annotated fiddle that is slightly simpler and adds a loading spinner:

http://jsfiddle.net/Leftium/L2HdV/ (Hat tip to Umidbek for the spinner!):

jQuery(document).ready(function ($) {
    $app = $('.app');

    // Attach behavior to Login button.
    $('.login').on('click', function () {
        $app.addClass('loading');

        // Create an <iframe>.
        $iframe = $('<iframe>');

        // Set url of <iframe> to desired redirect URL.
        // Note: the URL must be in the same domain,
        // or set special HTTP headers to allow rendering inside an <iframe>.
        $iframe.attr({src: 'http://doc.jsfiddle.net/'});

        // Add <iframe> we just created to DOM.
        $iframe.appendTo($('body'));

        // When <iframe> has been loaded, remove <div> containing login button
        // and loading spinner to reveal <iframe>.
        $iframe.load(function() {
            $('.app').remove()
        });
    });
});

Answer 3

I'm not even sure you need to use any jQuery or Javascript unless you want to dynamically take care of many cases like this. You can look into HTML5 prefetch to preload and cache the next page after login. So in the head of your document add:

<link rel="prefetch" href="http://example-site/next_page_after_login.html" />

You can read more about this on David Walsh blog here, or read more on MDN prefetch MDN