Pregunta

¿Cómo hacer precarga de imágenes en Javascript?

Responder esta pregunta por dudin el 2009-12-18

Estoy mostrando un slideshow de photos que tienen un tamaño relativamente grande y necesito habilitar los controles (Avanzar, Atrás y Paginado) cuando se hayan cargado todas las fotos, ahora ¿Cómo le hago?

[reportar pregunta]

Respuestas

Aquí les dejo una clase JavaScript que controla la carga de una imagen y al terminar llama una función de retorno. Mediante la misma se pueden llamar cada una de las imágenes del slideshow.

<!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>Ejemplo de precarga</title>
	<script language="javascript">
 function preCargaImagen (){
     this.src= '';
     this.cargando=false;
     this.cargada= false;
     this.arrancaCarga= function(src) {
        this.src = src;
        if ((this.cargada == false) && (this.cargando != true)) {
            this.cargando = true;
            var nuevaImagen = null;
            nuevaImagen = new Image();
            nuevaImagen.src = this.src;
            if (nuevaImagen.complete) {
                    this.cargada = true;
                    Imagencargada(this);
            } else {
                nuevaImagen.onload = function() {
                    this.cargada = true;
                    Imagencargada(this);
                };
            }
        }
    }
}
function $(id){
return document.getElementById(id);
}
</script>
  </head>
  <body>
  <img id="imagen1" src="" width="500" alt="Aquí va la foto después de la precarga"/>
<script language="javascript">
 function Imagencargada (imagen){  $('imagen1').src=imagen.src;}
 var imagen1 = new preCargaImagen();
     imagen1.arrancaCarga('http://farm2.static.flickr.com/1403/1449205579_f99a9851d5.jpg');
 </script>
 </body>
</html>

por maikel el 2009-12-18

[reportar al moderador]

Otra clase que aun no he probado.

/*
**************************************
* Preloader Class v1.0               *
* Autor: Carlos R. L. Rodrigues      *
**************************************
*/
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;
};