<Javascript Image Preload ⁄ >

/**
* Static Class Events
* Manage Events
*/
Events = function(){}
 
/**
* Add Event
*
* Full credits to (I just made a few mods):
* http://www.quirksmode.org/blog/archives/2005/10/_and_the_winner_1.html
*
* @param Object
* @param Object
* @param Object
*/
Events.AddEvent = function(obj, type, fn){
  if(!obj) return;
 
  this.RemoveEvent(obj, type, fn);
  if (obj.addEventListener) {
    obj.addEventListener(type, fn, false);
  }
  else {
    if (obj.attachEvent) {
      obj["e" + type + fn] = fn;
      obj[type + fn] = function(){
        obj["e" + type + fn](window.event);
      }
      obj.attachEvent("on" + type, obj[type + fn]);
    }
  }
}
 
/**
* Remove Event
*
* Full credits to (I just made a few mods):
* http://www.quirksmode.org/blog/archives/2005/10/_and_the_winner_1.html
*
* @param Object
* @param Object
* @param Object
*/
Events.RemoveEvent = function(obj, type, fn){
  if (obj.removeEventListener) {
    try{obj.removeEventListener(type, fn, false);} catch(e){}
  }
  else{
    if (obj.detachEvent) {
      obj.detachEvent("on" + type, fn);
      obj[type + fn] = null;
      obj["e" + type + fn] = null;
    }
  }
}

/**
* 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=new Image();
    _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 instanceof Array);}
 
  /**
  * 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);
}

/**
* Startup function
*
* @author pedrocorreia.net
*/
Init = function(){
  //create json object with just one image
  var img = {
    "folder": "http://www.pedrocorreia.net/",
    "images": "dp_small.jpg"
  };
 
  //create json object with multiple images
  var imgs1 = {
    "folder": "_images_/",
    "images": [
      "image3.jpg",
      "image4.jpg",
      "image5.jpg"
    ]
  }
 
  //create another json object with multiple
  //images that are in "img" subfolder
  var imgs2 = {
    "folder": img.folder+"subfolder/",
    "images": [
      "image6.jpg",
      "image7.jpg",
      "image8.jpg"
    ]
  }
 
  //create object
  var preloader = new ImagePreloader("dummy_preloader",img,imgs1,imgs2,{"folder": "../my_previous_folder/", "images": "image.png"});
 
  //invoke preloading
  try{
    preloader.Preload();
  }
  catch(err){
    alert(err);
  }
}
 
Events.AddEvent(window,"load",Init);

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
  <head>
    <title>Javascript Image Preloader</title>
    <script type="text/javascript" src="Events.js"></script>
    <script type="text/javascript" src="ImagePreloader.js"></script>
    <script type="text/javascript" src="Init.js"></script>
 
    <style type="text/css">
      .hidden{display: none;}
    </style>
 
  </head>
  <body>
    Content goes here, regarding that all images were preloaded ...
    <div id="dummy_preloader" class="hidden"></div>
  </body>
</html>