The standard way to preload Image files in JavaScript seems to be something like this:
var images_to_load = ['img1.png', 'img2.png', 'img3.png'];
for(var i=0; i<images_to_load.length; i++){
var img = new Image();
img.src = images_to_load[i];
}
This loads the image into the cache by getting the browser to request the image file. However, there's no guarantee that the image file sticks around in the cache, as the cache expiration time is dependent on server settings and browser settings.
Is an image guaranteed to remain in the cache until the page is closed if you keep the Image object in memory? Here's a basic example:
var images_to_load = ['img1.png', 'img2.png', 'img3.png'];
var loaded_images = [];
for(var i=0; i<images_to_load.length; i++){
var img = new Image();
img.src = images_to_load[i];
loaded_images.push(img);
}