A Useful JavaScript Image Loader

Posted on February 21, 2008
Filed Under Javascript | 6 Comments
Tags: Event, Javascript, preloading, YUI

I released a YUI implementation of image gallery script a month ago. While it was quite an enjoyable experience to explore the potential of YUI and JavaScript, I found I have created many userful code snips (for instance this Loading Panel) along the way.

Today I am going to show you another useful JavaScript code snip: Image Loader. What! You might ask. I admit that name is too generic, but it does what it does - it helps you to load images using JavaScript. Just give it an image URL, it will return a DOM image object that can be used for dynamic loading of images. This script provides a loading completion event, which is very useful for displaying preloader or extra information when the image is being loaded.

The original image loader I created relies on YUI, but I want to make it as portable as possible, so I created a standalone version.

Usage

First you need to create a new instance of ImageLoader, and feed the loader with an image URL:

var loader = new ImageLoader('IMAGE_URL');

Set event handler (which is a function) so that you can process the image after it is loaded:

loader.loadEvent = function(url, image){
   //actions to perform when the image is loaded
   //alert(url + ' is loaded');
   document.body.appendChild(image);
  //hide loading indicator if applicable
}

For example, if you were showing a loading image before the loading sequence and you want to hide it as soon as the image is loaded, you can put your code inside of loadEvent handler. The load Event handler takes two arguments, which are self-explanatory:

url - The url you specified when instantiating the loader
image - DOM reprentation of the image, you can call foo.appendChild(image)

Invoke load method on the loader to load the image:

loader.load();

That's all. Still confused by what can this image loader do? Try this example to find out.

As shown in the online example, combining with YUI loading panel, you can make an interesting image loading effect effortlessly.

Complete Source Code

imageloader.js

/**
* A simple JavaScript image loaderimage loader
* @author Cuong Tham
* @url http://thecodecentral.com/2008/02/21/a-useful-javascript-image-loader
* @usage
* var loader = new ImageLoader('IMAGE_URL');
* //set event handler
* loader.loadEvent = function(url, image){
*   //action to perform when the image is loaded
*   document.body.appendChild(image);
* }
* loader.load();
*/

//source: http://snipplr.com/view.php?codeview&id=561
// Cross-browser implementation of element.addEventListener()
function addListener(element, type, expression, bubbling)
{
  bubbling = bubbling || false;
  if(window.addEventListener)	{ // Standard
    element.addEventListener(type, expression, bubbling);
    return true;
  } else if(window.attachEvent) { // IE
    element.attachEvent('on' + type, expression);
    return true;
  } else return false;
}

var ImageLoader = function(url){
  this.url = url;
  this.image = null;
  this.loadEvent = null;
};

ImageLoader.prototype = {
  load:function(){
    this.image = document.createElement('img');
    var url = this.url;
    var image = this.image;
    var loadEvent = this.loadEvent;
    addListener(this.image, 'load', function(e){
      if(loadEvent != null){
        loadEvent(url, image);
      }
    }, false);
    this.image.src = this.url;
  },
  getImage:function(){
    return this.image;
  }
};