javascript/jquery start loading hidden images when page is ready

Question

I have a bunch of images on a website that have two versions: a large one and a small one.

The small version automatically display when you visit the website and when you click them, I use jquery to open up a hidden div and insert the large version.

Since the large images are not visible to the browser when the page loads (no img has them as a src), they will not be loaded until the user clicks one of the small images to enlarge it, and therefore they will not slow down page loading time.

To make the UI as responsive as possible however, I would like to start buffering the large images from the moment the page has loaded (so that they are there when the user clicks one of them).

how can I start loading images in the background?

load the images into an img element not visible one by one - the client will cache them and display them quicker — Manse
– Manse, Commented Dec 11, 2012 at 15:45

David Hellsing · Accepted Answer · 2012-12-11 15:45:58Z

You can start loading images in the background when you set a src to an Image object, f.ex:

(new Image).src = src;

Here is a function for you:

function preloadImages() { for(var i=0; i<arguments.length; i++) { (new Image).src = arguments[i]; } } preloadImages('one.jpg', 'two.jpg');

I suggest you start preloading the images when the window has loaded (inside the window.onload callback) to prevent it from sabotaging the UI:

window.onload = function() { preloadImages('one.jpg', 'two.jpg'); };

Collectives™ on Stack Overflow

javascript/jquery start loading hidden images when page is ready

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related