Pre-loading (caching) images is as easy as creating a new image object and setting the object’s src property.
var img = new Image();
img.src = 'image1.gif';
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: