Question

I have this function in a file called plugins.js:

$.fn.preload = function(){
    this.each(function(){
        $('<img/>')[0].src = this;
    });
}

Then I have this in another file called footer.js:

$(['img1.jpg','img2.jpg','img3.jpg']).preload();

Shouldn’t all this preload the images?

The images are all in a folder called “graphics”.

I suspect the images are not preloaded because it takes a little while for the images to load when I am hovering the mouse over a button (I use the images for mouseOver effects).

Is there any method to check for sure that the images have been preloaded? Can I do so with the above script?

I am not very good with jquery so code help is appreciated.

Thanks

Answer 1

There is no method which will say whether the images have been preloaded or not. You can use image load event to determine whether image is loaded or not.

E.g

$("img").load(function(){
   //Image loaded
});

There is also error event which gets triggered if the image load fails due to any reason

 $("img").error(function(){
       //Image load failed
 });