Preload image in index.html to use on another page

Question

I have a large image that displays as a background on another page of my website. I want to preload this image when users first go to my webpage so that when they eventually move to the page with the image on it, it loads instantly.

I use this to preload:

<script type="text/javascript">
  if (document.images) {
  img1 = new Image();
  img1.src = "image.jpg";
}
</script>

How do I use this so it stores the image to use on a later page?

Thanks in advance!

Answer 1

ANSWER:

Turns out if I simply put the above js at the bottom of my index.html, it loads the image into the cache and then the browser will grab that image when the user clicks to go to another page that includes the image.

In other words, I already had the answer!

Answer 2

I think what you are looking for is image pre-Loading.

Have a look here

Hope this helps