Image Preloader //JavaScript Repository

Description

Image preloader with events and allows grouping the images to supply a synchronized loading.
Created: 2005.08.13

Code (Download)

//+ Carlos R. L. Rodrigues
//@ http://jsfromhell.com/classes/preloader [rev. #1]

Preloader = function(){
    var o = this;
    o.img = [];    o.r = []; o.g = [];
    o.n = {}; o.total = o.loaded = 0;
};
Preloader.prototype.add = function(i, g){
    var o = this, n = (o.g[o.total] = [g || "general"])[0];
    (g = o.n)[n] >= 0 ? ++g[n] : g[n] = 1;
    o.img[o.total++] = i;
};
Preloader.prototype.load = function(){
    var o = this, p = o.img, l = p.length, a, g = o.g;
    while(l--){
        (g[l][1] = a = new Image()).src = p[a.i = l];
        a.onload = function(){
            if(o.r[this.i]) return;
            !--o.n[g[this.i][(o.r[this.i] = 1) - 1]] && o.onGroupComplete && o.onGroupComplete(g[this.i][0]);
            o.onImageComplete && o.onImageComplete(this);
            (++o.loaded == o.total) && o.onComplete && o.onComplete();
        };
        (a.fileSize !== undefined ? a.fileSize > -1 : a.width) && a.onload();
        a.onerror = function(){
            o.onImageError && o.onImageError(this);
        }
    }
};
Preloader.prototype.getImagesByGroup = function(n){
    var g = this.g, i = [], p = 0, n = n || "general";
    for(var j = g.length; j; g[--j][0] == n && (i[p++] = g[j][1]));
    return i;
};

Example (Example)

<script type="text/javascript">
//<![CDATA[
var x = new Preloader();
x.add("http://www.google.com.br/intl/pt-BR_br/images/logo.gif", "grupo_A");
x.add("http://www.google.co.uk/intl/en_uk/images/logo.gif", "grupo_A");
x.add("http://www.google.com.bo/intl/es_bo/images/logo.gif", "grupo_B");
x.add("http://www.google.com/intl/zu_ALL/images/logo.gif", "grupo_B");

x.onImageComplete = function(img){
    // Quando cada imagem vai sendo finalizada
    // img = objeto Image
    // alert(img.src);
};
x.onComplete = function(){
    // Quando todas imagens s?o finalizadas
};
x.onGroupComplete = function(n){
    // Quando cada grupo vai sendo finalizado
    // n = nome do grupo
    var j, m;
    for(var i = (j = this.getImagesByGroup(n)).length; i--;){
        j[i].title = "GRUPO " + n;
        document.body.appendChild(j[i]);
    }
};
x.load();
//]]>
</script>

Help

Construtor

Preloader(void): Generates an instance of Preloader.

Methods

Preloader.add(url: String, [group: String = "general"]) : void

Adds an url to the list of images that will be preloaded.

url: address of the image
group: name of the group that the image belongs to

Preloader.getImagesByGroup([name: String = "general"]): Array

Returns all the objects Image associated with a determinated group.

name: name of the group

Preloader.load(void): void

Starts to load the images.

Events

Preloader.onImageComplete: function(image: Image): void: It's fired for every image that is loaded. The associaded image argument is passed as argument.
Preloader.onComplete: function(group: String): void: It's fired when all the images of a specified group are loaded. The name of the group is passed as argument.
Preloader.onComplete: function(void): void: It's fired when all the images are loaded.

JSFromHell.com