Question

I have a web page which displays different images when different links on the same page are clicked. The images are very high quality and they take a lot of time to load, and I want the images to be downloaded and saved in the cache and then loaded on onclick event of the links.

Answer 1

Just load them all as hidden images.

CSS:

.hidden {
    display:none;
}

HTML:

<img src="/hugeImage.jpg" class="hidden" />
<img src="/hugeImage2.jpg" class="hidden" />
<img src="/hugeImage3.jpg" class="hidden" />
<img src="/hugeImage4.jpg" class="hidden" />

You can easily simulate this with JavaScript, adding each of the images to the DOM after the DOMContentLoaded event – the same logic applies.

var img = document.createElement('img');
img.setAttribute('src', '/hugeImage.jpg');
img.setAttribute('class','hidden');
document.body.appendChild(img);