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.

When you change pages, you lose any preloaded content. You have to preload the image, and inject it into the same page you are. — bfavaretto, Jul 15 '13 at 19:37
@bfavaretto Not entirely true. The image may not directly be available in the page, but it will probably be available in the browser cache and therefor load much faster. — GolezTrol, Jul 15 '13 at 19:38
@GolezTrol True. But looks like it's a case for ajax, as Diodeus said. — bfavaretto, Jul 15 '13 at 19:39
@Diodeus, any suggestions of website or codes that i can grab for this purpose ? — Michelle Dodson, Jul 15 '13 at 19:42
I'm a developer - I just write the code myself. Read the jQuery .ajax documentation. http://api.jquery.com/jQuery.ajax/ — Diodeus - James MacFarlane, Jul 15 '13 at 19:43

score 0 · Accepted Answer · answered Jul 15 '13 at 20:50

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>

Sure thing. Hopefully this at least gets you pointed in the right direction. — Arth Du, Jul 15 '13 at 21:09

How to preload a web page using external preloader?

1 Answers1

Linked