Javascript Image Preload

I'm looking at how a site DoNothingFor2Minutes preloads its images with JavaScript and it's given rise to a few questions. I noticed that the site doesn't preload all of its images

Solution 1:

I am guessing that the site is just preloading images that will be used for CSS hovers - so that the user doesnt see any flickering / loading happen when they hover and the on-hover image is not available and has to be loaded.

The site owner figures that for all other images its OK to have them load as part of the normal cycle.

But yes - users particularly notice not smooth hover transitions, so those are being optimized.

Solution 2:

Why would you need to preload images that are referenced directly by the page? They will be requested as references to them are encountered as the source of the page is parsed.

The preloading is likely to be used for images that are displayed, for example, on mouse over of other elements. The preloading means that the images have already been requested, and there won't be a delay while the image downloads. That's probably why you don't see the preloaded images in the HTML.

Solution 3:

1) Generally you want to preload images that are important and should be seen right away. A giant picture background doesn't seem like it would be necessary to load right away.

2) It is possible, and it really depends on your specific case whether it's practical or not.

3) The developer is then referencing the images from the images array he's created in JavaScript instead of using HTML (e.g., <img src="...