<Javascript Image Preload ⁄ >

There are various ways to preload images in a html page and there are many reasons for you to want to preload some web content, like images for example when you're building a gallery or some effects, the delay in image loading may ruin your effect.

You'll have to use very carefully image preloading, if for instance, you're preloading many or heavy images you'll delay the page presentation and maybe your user will get tired of waiting and simply go away.
A simple trick is to place the loading immediately before the closing tab body, with this you webpage will be loaded, the user will see something, which will makes him be more patiently and the images will be preloaded at the end. I won't exemplify this trick, I'll preload the image during body onload, although this might not be the most advisable way, it's up to you to decide, since every webpage's a webpage.

We can use some techniques like: JavaScript; Css; JavaScript & Css. I'll use JavaScript and Css.

Initially I was just using JavaScript, however when doing some tests, I realized that IE wasn't caching images, the trick to bypass this was to create a dummy preloader div and append all the images to there.
Well since you just want to preload the images, and definitely don't want to show them to your user, you can style that div for not showing or give it an absolute position with negative positioning, etc, etc. In this example I'll just hide the div using "display: none;".
After doing this IE was starting to preload images, hooray!

Events.js - this file's responsible for events management, that is, our page has elements and those elements will react to events/ triggers, with this class we'll be able to add or remove events, such as onchange, onload, etc, etc.

ImagePreloader.js - this Class will be responsible to preload the images. We can preload as many images as we want (but please just bear in mind that it's not advisable to preload lots or heavy images, or you'll be at risk of your user close your webpage tab).

This class can receive as many arguments as you want to, regarding that the first argument's the preloader div name, the following arguments must have a Json format with a specific structure, but we'll see this ahead ...

/**

* This Class's responsible to preload the images

*

* @param String Div where images will be preloaded

* @param Object

* @param [Optional] Object(1) ... Object(n)

*

* @author pedrocorreia.net

*/

ImagePreloader = function(div, obj /**,objs */){

this.args = arguments; //assign attribute

/**

* Preload Images

*/

this.Preload = function(){

//check if we have a valid placeholder

if(!$(this.args[0]))throw("DIV_NOT_FOUND");

//check placeholder style display

if($(this.args[0]).style.display!="none"){

//if it's visible, then let's hide it...

$(this.args[0]).style.display="none";

}

var count_args = this.args.length, count = 0;

//iterate object arguments, starting at 2nd element,

//because the 1st element args[0] stores

//our dummy div preloader

for(var i = 1; i < count_args; i++){

var img_pre = this.args[i];

if(_is_array(img_pre.images)){

count = img_pre.images.length;

//iterate images array and load them

for(var j = 0; j < count; j++){

_load(img_pre.folder, img_pre.images[j], this.args[0]);

}

}

else{

_load(img_pre.folder, img_pre.images, this.args[0]);

}

}//end iterate object arguments

}//end method Preload

/**

* Private Method

*

* Create a new DOM Image and load it

*

* @param String Folder Name

* @param String Image Name

* @param String Div where images will be preloaded

*/

var _load = function(folder, img, div){

if(!img || !div)return;

var _dummy_img=newImage();

_dummy_img.src=_folder(folder) + escape(img);

$(div).appendChild(_dummy_img);

}//end private method _load

/**

* Private Method

*

* Finds if the given argument is an array

*

* @param Object

* @return Bool

*/

var _is_array = function(obj){return(obj instanceofArray);}

/**

* Private Method

*

* Check if we have a valid folder, this is,

* with a slash "/" at the end

*

* @param String Folder

* @return String

*/

var _folder = function(folder){

if(_right(folder, 1) != "/"){folder = folder + "/";}

return folder;

}//end method _folder

/**

* Private Method

*

* Extract the rightmost part of a String

*

* @param String String to extract chars

* @param Int Number of chars

*/

var _right = function right(str, n){

if(str=="" || n<=0)return"";

var len = String(str).length;

return(n>len)?str:String(str).substring(len,len-n);

}//end method _right

}

/**

* Get element reference

*

* @param Object

* @return Object Reference

*/

$ = function(elem){

if(document.getElementById)return document.getElementById(elem);

}

As I already said, the arguments must be in a valid Json format with a specific structure. We can just preload one image, but we may need to preload 2+ images, well we can create 2 variables, or we can use an array. See this example:

We're creating a variable with 2 fields: folder and images.
As you can easily see our image will have the following url:
- http: ⁄⁄www.pedrocorreia.net⁄image1.jpg
But what if we to preload 5, 6, ... n images? We could just create those n variables ... well that's unnecessary, we could just turn our field images to an array, to achieve this we can use square brackets "[]", like the following example: