How to preload a web page using external preloader?

Question

I have a simple HTML page that has a large image as a full screen background; I called this page index2.html.

I want to create another page called index.html which will preload index2.html fully, and then direct the user to it. However, all the preloader solutions that I've found on internet are based on a single HTML page.

How can I accomplish this? Any help would be appreciated.

Answer 1

You can cause the browser to cache the image by loading it on index.html as a 1 pixel image

<img src="/index2-background-image.jpg" alt="" width="1" height="1" />

Alternatively you could load the content from index2.html using jQuery like so:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery().ready(function () {
    $.get('index2.html', function(data) {
        jQuery("#index2content").html(data);
    });
});
</script>

<div id="index2content"></div>