Tutorial: Preloading Images

**kirupa** · April 1st, 2012, 05:07 PM

Hi everyone,
This is the happening place to discuss all things related to the Preloading Images tutorial. If you want to be cool, you know you want to read it.

Cheers,
Kirupa

**MariusJP** · April 2nd, 2012, 12:43 PM

Interesting tutorial! Usually what I did what was have a div on each page with the images that needed to be loaded inside img tags and just place that div faaaaar out of view

But this is a really cool way of preloading! I did some research a while back about jQuery preloaders, but most stuff was meant for image gallery's in stead of just the rollOver's on people's sites.
Thanks Kirupa

**MariusJP** · April 11th, 2012, 04:24 AM

I might be completely wrong here, but does this work even when you change pages, as in: index.html to page1.html?

And then have the images for page1 already preloaded?

**kirupa** · April 15th, 2012, 06:25 PM

MJ - yes, it should work. The reason is that once your browser caches the image, it is cached until you or your browser deletes it.

For example, notice that the images don't get re-downloaded when you visit the same page using what is effectively a new URL:

http://www.kirupa.com/html5/examples...images.htm?123
http://www.kirupa.com/html5/examples...mages.htm?1234
http://www.kirupa.com/html5/examples...ages.htm?12345