How To Preload A Web Page Using External Preloader?

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 ind

Solution 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>