How does the javascript preloading work?

Question

I don't want to know a way to preload images, I found much on the net, but I want to know how it works. How is javascript able to preload images? I mean, I tried a snippet from here, and even if it works, it doesn't seem to preload images.

When I check firebug, I can see that the image is loaded twice, once while the preloading, another time when displaying it!

To improve this code I'd like to know how it works.

Here is what i do:

 function preload(arrayOfImages) {
        $(arrayOfImages).each(function(){
            $('<img/>')[0].src = this;
            //(new Image()).src = this;
            alert(this +'  &&   ' + i++);

        });
    }

then i do something like that:

preloader = function() {
    preload(myImages);
}

$(document).ready(preloader);

Here is how i display/add the image :

$("li.works").click(function() {
             $("#viewer").children().empty();
             $('#viewer').children().append('<img src=\'images/ref/'+this.firstChild.id+'.jpg\' alt="'+this.firstChild.id+'" \/>')
             $("#viewer").children().fadeIn();

Answer 1

Your basic Javascript preloader does this:

var image = new Image();
image.src = '/path/to/the/image.jpg';

The way it works is simply by creating a new Image object and setting the src of it, the browser is going to go grab the image. We're not adding this particular image to the browser, but when the time comes to show the image in the page via whatever method we have setup, the browser will already have it in its cache and will not go fetch it again. I can't really tell you why whatever you have isn't working this way without looking at the code, though.

One interesting gotcha that is discussed in this question is what happens when you have an array of images and try preloading them all by using the same Image object:

var images = ['image1.jpg','image2.jpg'];
var image = new Image();
for(var x = 0; x < images.length; x++) {
    image.src = images[x];
}

This will only preload the last image as the rest will not have time to preload before the loop comes around again to change the source of the object. View an example of this. You should be able to instantly see the second image once you click on the button, but the first one will have to load as it didn't get a chance to preload when you try to view it.

As such, the proper way to do many at once would be:

var images = ['image1.jpg','image2.jpg'];
for(var x = 0; x < images.length; x++) {
    var image = new Image();
    image.src = images[x];
}