How to preload images??

Every find need to pre-load images to add some grace in the way your site load or to make some bon-bon effects? I bet you do.  So, let see how one can achieve it using javascript orjquery. :)


Some variables to be used to preload image
imgSrc: /path/to/chantu.jpg
 #imgBox : element where to load

Javascript Way:
//create a new image element
var imgPreload = new Image();
//attach image
imgPreload.src = imgSrc;
//now load it and when image loads, bring it inside the DOM and place it inside the #imgBox ;)
imgPreload.onload= function(){
    //place it inside the DOM
$("#imgBox").append("imgPreload");
}



That's it. You're done.

Jquery way
var imgPreload = $("<img/>").attr("src", imgSrc);
$(imgPreload).load( function(){
    $("#imgBox").append("imgPreload");
});

OR
$("<img/>").attr("src",imgSrc)
                   .load( function(){ 
                          $("#imgBox").append( $(this); 
 });


To create a new image object in jquery , we use $("<img/>").