jQuery Tip: Image Preloading

Apart from using JavaScript to pre-load images, you can very easily use a little bit of jQuery to do the same:

Demo: http://jsfiddle.net/ucv4g/

If you want to use a jQuery plugin for image preloading, here are a few:

https://github.com/farinspace/jquery.imgpreload
https://github.com/dreamerslab/jquery.preload

JavaScript Tip: Image Preloading

Pre-loading (caching) images is as easy as creating a new image object and setting the object’s src property.

But what if we have several images to load?

What makes this preloading is that you do it before you need to replace an image currently on the web page. One way to preload is to create an array at the beginning of a script containing the paths to all graphics you wish to preload, then loop through that list, creating a new image object for each one:

Continue reading