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