Pré-carregador De Imagens //Repositório JavaScript

Descrição

Pré-carregador de imagens com eventos e possibilidade de agrupar as imagens para fornecer um carregamento sincronizado.
Criado: 2005.08.13

Código (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;
};

Exemplo (Exemplo)

<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>

Ajuda

Construtor

Preloader(void): Gera uma instância de Preloader

Métodos

Preloader.add(caminho: String, [grupo: String = "general"]) : void

Adiciona uma url a lista de imagens para pre carregar.

caminho: url da imagem a ser carregada
grupo: nome do grupo em que a imagem pertence

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

Retorna todos os objetos Image de um determinado grupo.

nome: nome do grupo

Preloader.load(void): void

Inicia o carregamento.

Eventos

Preloader.onImageComplete: function(imagem: Image): void: É disparado para todas imagens ao término do carregamento mandando como argumento o objeto Image correspondente.
Preloader.onComplete: function(grupo: String): void: É disparado quando todas imagens de um determinado grupo são carregadas e é passado como argumento o nome do grupo.
Preloader.onComplete: function(void): void: É disparado quando todas imagens são carregadas.

JSFromHell.com