How come this image preload isn't working?

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

Works fine for me:

Example: http://jsfiddle.net/98rXx/

<button id='click'>click here</button>

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

$(["http://dummyimage.com/120x90/f00/fff.png&text=my+image"]).preload();

  // clicking the button displays the image immediately
$('button').click(function() {
    $('<img>',{src:"http://dummyimage.com/120x90/f00/fff.png&text=my+image"})
        .appendTo(document.body);
});

---

Though I think you'd be better off making it more of a utility:

$.preload = function( arr ){
    $.each( arr, function(i,v){
        $('<img/>')[0].src = v;
    });
};

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

Answer 2

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.

Eg

$("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
 });

Answer 3

Good day sir, you can check wether your images are preloaded by using firebug in firefox or the developer console in chrome. They both have tabs (Net adn Network respectively) that let you monitor all the requests your browser makes.

Firefox also has the developer tools plugin that will let you turn off caching. This combined with the Net tab should give you an accurate picture of what is loaded on the webpage before doing anything at all on the webpage itself after refreshing.

As for the preload script; you might want to check this out:

http://engineeredweb.com/blog/09/12/preloading-images-jquery-and-javascript

Answer 4

Your script as it is should work, but if the images are in a different directory(graphics) you need to extend the path:

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

Answer 5

The way I do it is using the Image object:

var img = new Image();
img.src = 'image.jpg';
img.onload = function(){
    alert('Image has been preloaded! width: '+ this.width + ', height: '+this.height);
};
img.onload = function(){
    alert('There was an error loading: '+this.src);
}

So your plugin should look something like this (untested):

$.fn.preload = function(){
    var img = new Image();
    this.each(function(){
        img.src = this;
    });
}

Still, you need to use the onload callback to make sure all images where loaded, or just wait.

Cheers!