I am trying to find an image preloader script.
While i found a few, none of them supports an event that is triggered when preloading is finished.
Does anyone know of any script or jQuery plugin that will do this?
Hope this question is appropriate for stackoverflow - if not, feel free to remove it in an instant.
Preloading and loading are the same thing. You can insert the image (either create a new one or change the "src" attribute of an existing one) but hide the element using $("element").hide() or something similar. Before you do this, attach a load event handler like so:
var images = ["src1", "src2", "src3", "src4"];
var len = images.length;
for(i=0; i<len; i++){
$("parent element").html('<img id="new-img" style="display:none;" src="'+images[i]+'"/>');
$("new-img").load(function(){
//Your image is now "preloaded"
//Now you can show the image, or do other stuff
$(this).show();
});
}