Preloader class for jQuery

Preloader.js

$.extend(Function.prototype, {
    use: function() {
		var method = this, args = Array.prototype.slice.call(arguments), object = args.shift();
		return function() {
			return method.apply(object, args.concat(Array.prototype.slice.call(arguments)));
		}
    },
    useEL: function() {
        var method = this, args = Array.prototype.slice.call(arguments), object = args.shift();
        return function(event) {
            return method.apply(object, [event || window.event].concat(Array.prototype.slice.call(arguments)));
        }
    }
});

/**
 * Preloader
 * @param overlay [boolean]     Whether or not the Preloader shows and overlay and loading message
 *
 * Usage:
 * var myPreloader = new Preloader(false);
 * $(myPreloader).bind('loading', myLoadStartCallback);
 * $(myPreloader).bind('loaded', myImageLoadedCallback);
 * $(myPreloader).bind('complete', myLoadCompleteCallback);
 * $(myPreloader).bind('error', myLoadErrorCallback); // event.data.message returns error text string from Preloader.strings.error
 * myPreloader.load(['img1.png', 'img2.png', 'img3.png';]);
 */

var Preloader = function(overlay) {
    this.cache = [];
    this.loading = false;
    
    if(overlay) {
        this.els = {
            overlay: $(Preloader.selectors.overlay),
            container: $(Preloader.selectors.loadingBox)
        };
                
        this.show();
    }
};
$.extend(Preloader.prototype, {
   _load: function(source) {
       if($.inArray(source, this.cache) != -1) {
           $(this).trigger('loaded');
           return;
       }
       
       var image = new Image();
       
       image.onload = function() {
           this.cache.push(image.src);
           $(this).trigger('loaded');
       }.use(this);
       
       image.onerror = function() {
           $(this).trigger('error', {message: Preloader.strings.error})
       }.use(this);
       
       this.loading = true;
       
       $(this).trigger('loading', {image: source});
       
       image.src = source;
   },
   load: function(sources) {
       var sources = $.makeArray(sources);
              
       var preCacheLength = this.cache.length;
       var l = sources.length;
              
       $(this).bind('loaded', function(event) {
           if(sources.length+preCacheLength == this.cache.length) {
               $(this).trigger('complete');
           }
       }.useEL(this));
       
       while(l--) {
           this._load(sources[l]);
       }
   },
   setPosition: function() {
       var leftCenter = Math.round(($(window).width()/2)-(this.els.container.width()/2));
       var topCenter = Math.round(($(window).height()/2)-(this.els.container.height()/2));
       
       this.els.container.css({ 'top': topCenter+'px', 'left': leftCenter+'px' });
   },
   show: function() {
       this.els.overlay.show();
       this.setPosition();
       this.els.container.show();
   },
   hide: function() {
       setTimeout(function() {
           this.els.overlay.fadeOut(2000)
           if($.support.opacity) {
               this.els.container.fadeOut(2000)
           } else {
               this.els.container.hide()
           }
       }.use(this), Preloader.minTimeout);
   }
});
$.extend(Preloader, {
    strings: {
        error: 'Error loading images. Please reload this page to try again.'
    },
    selectors: {
        overlay: '#overlay',
        loadingBox: '#loadingBox' 
    },
    minTimeout: 1000
});