Cargar unas imágenes en un orden determinado

derkenuke · #1 (**permalink**) 09/07/2008, 15:24

Hola:

He buscado sobre el tema y nada me ha solucionado lo que ando buscando. Tengo unas cuantas imágenes, bastante pesadas:

Código PHP:

  <img name="cjto" src="http://lidiaelora.files.wordpress.com/2007/12/muro.jpg" width="200" />

<img name="cjto" src="http://www.utpl.edu.ec/elmuro/wp-content/uploads/2008/04/muros2.JPG" width="200" />

<img name="cjto" src="http://images.blockstar.com/uploads/hexxer/modelando-en-el-muro.JPG" width="200" />

<img name="cjto" src="http://manuelsosa.com/altas/abubillas_en_muro.jpg" width="200" />

<img name="cjto" src="http://www.astrosmo.unam.mx/~l.luis/alemania/114.Muro.JPG" width="200" />

Me gustaría que primero se cargase la primera, cuando haya acabado de cargarse ésta, entonces empiece a cargarse la segunda... y así sucesivamente. Es decir, que carguen por orden.

No veo nada que me ayude a cancelar el proceso de carga automático que ocurrirá al visualizar el documento en el navegador, así que no puedo controlar todo como quiero. Lo único que se me ha ocurrido hasta ahora es recorrer las imágenes y sustituir sus src por una imagen transparente blanca (así cancelo su carga). Después cargo la primera, y cuando detecte que complete=true (o le pongo un onload...) entonces empezamos la carga de la siguiente.

¿Se os ocurre alguna manera mejor de llevarlo a cabo? Las imágenes obviamente estarían en el mismo servidor. No creo que sea ésta la manera más rápida de cargarlas (son 19 imágenes en total de 100kb en mi caso, y sólo se ven inicialmente un par de ellas), ¿Cuándo empezaría a cargar la siguiente? ¿Cuando esté la anterior al 80%, por ejemplo?

Eso último sería simplemente hacer pruebas, pero me gustaría saber cómo funciona un servidor en esos casos. Si dividimos una imagen grande en secciones, ¿carga antes? En mi caso es una panorámica y la querría cargar de izquierda a derecha.

Saludos

!

David · #2 (**permalink**) 09/07/2008, 15:46

Buscando un poco encontré este tema. ¿Has probado con la solución que proponen allí?

derkenuke · #3 (**permalink**) 09/07/2008, 16:16

Hola David el Grande:

Ya encontré ese tema antes de postear el mío, pero no me aportó nada nuevo ya que en cuanto escribes esta línea de código la imagen comienza a cargar:

Código PHP:

  logo = new Image()
logo.src="logo.jpg"

Se podría comenzar a cargarlas así, o cambiando directamente el src de una imagen del documento.

Ahora, ¿Cómo detener la carga de las imágenes una vez colocadas? ¿No existirá un stop() o algo así? ¿Eliminar el nodo IMG directamente? ¿Cambiar su src?

Algo se nos ocurrirá.
Saludos.

Panino5001 · #4 (**permalink**) 09/07/2008, 21:56

Fijate si algo como esto puede servirte: http://www.cryer.co.uk/resources/javascript/script3.htm

#5 (**permalink**) 10/07/2008, 00:42

Cita:

en cuanto escribes esta línea de código la imagen comienza a cargar

Y si haces algo de este estilo...?

Código:

var imagenes = ["uno.jpg","dos.jpg","tres.jpg"];
window.onload = function() {
    cargarSiguiente(0);
}
function cargarSiguiente(i) {
    logo = new Image();
    logo.src = imagenes[i];
    logo.onload = function() { cargarSiguiente(i+1); };
}

El problema de esto es que estás retrasando la carga de las imágenes y... no sé, me pregunto por qué querrías hacer esto.

derkenuke · #6 (**permalink**) 10/07/2008, 07:26

Cita:

Iniciado por Panino5001

Fijate si algo como esto puede servirte: http://www.cryer.co.uk/resources/javascript/script3.htm

Gracias por el enlace, pero si ponemos
<img name=image0 onLoad="LoadImage('image1','number1.gif')">
nunca validará, porque no tiene atributo src (además no tiene alt ni existe onLoad

)

Cita:

Iniciado por venkman

Y si haces algo de este estilo...?

Código:

var imagenes = ["uno.jpg","dos.jpg","tres.jpg"];
window.onload = function() {
    cargarSiguiente(0);
}
function cargarSiguiente(i) {
    logo = new Image();
    logo.src = imagenes[i];
    logo.onload = function() { cargarSiguiente(i+1); };
}

Lo que pasa es que me gustaría tener mi HTML ya estructurado para luego tocarlo con javascript y controlar la carga, pero de una manera indirecta, sin tener que modificar demasiado el DOM. He conseguido algo así:

Código PHP:

  <!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" xml:lang="es" lang="es">

<head>

<meta http-equiv="Content-type" content="text/html;charset=iso-8859-1" />

<meta name="Author" content="derkeNuke" />

<title>Página nueva</title>

<meta http-equiv="cache-control" content ="no-cache" />

<style type="text/css">

img { border: solid 1px black; }

#img1 { width: 200px; height: 300px; }

#img2 { width: 200px; height: 180px; }

#img3 { width: 200px; height: 300px; }

#img4 { width: 200px; height: 500px; }

#img5 { width: 200px; height: 180px; }

</style>

</head>

 
<body>

 
<img name="cjto" id="img1" src="http://lidiaelora.files.wordpress.com/2007/12/muro.jpg" />

<img name="cjto" id="img2" src="http://www.utpl.edu.ec/elmuro/wp-content/uploads/2008/04/muros2.JPG" />

<img name="cjto" id="img3" src="http://images.blockstar.com/uploads/hexxer/modelando-en-el-muro.JPG" />

<img name="cjto" id="img4" src="http://manuelsosa.com/altas/abubillas_en_muro.jpg"  />

<img name="cjto" id="img5" src="http://www.astrosmo.unam.mx/~l.luis/alemania/114.Muro.JPG" />  

 
<script type="text/javascript">

<!--

 
 
var imagenes = document.getElementsByName("cjto");

var srcs = [];

for(var i=0; i<imagenes.length; i++) {

    srcs[i] = imagenes[i].src;                                        // guardamos su ruta

    imagenes[i].src = "http://www.denver-eye.com/images/blank.gif";    // sustituimos por imagen en blanco (paramos la carga automática)

}

// comenzamos la carga

function comienzaAcargar(i) {

    imagenes[i].style.background = "url(http://www.pilarlopezroman.com/imagenes/cargando.gif) 50% 50% no-repeat";    // imagen cargando

    imagenes[i].src = srcs[i];                                        // restauramos su ruta para que comience a cargar

    imagenes[i].onload = function() {                                // en su evento onload cargaremos la siguiente foto, si hubiere

        if( ++i<imagenes.length )

            comienzaAcargar(i);

    }

}

comienzaAcargar(0);

 
// -->

</script>

 
</body>

</html>

Sustituyo por una imagen en blanco y luego restauro poco a poco los src.

Cita:

Iniciado por venkman

El problema de esto es que estás retrasando la carga de las imágenes y... no sé, me pregunto por qué querrías hacer esto.

Es una buena pregunta. Con esto, ¿estoy retrasando la carga o simplemente redistribuyéndola? Quiero decir: Si se cargan todas las imágenes a la vez aparecerán todas, pero muy tarde. Yo quiero que estén enteras cuanto antes, sobre todo las primeras, por eso intento este script.

Otra pregunta gorda, ¿Se os ocurre la manera de que empieze la carga de una imagen cuando la anterior llega al 80%?

Saludos.

caricatos · #7 (**permalink**) 10/07/2008, 10:41

Hola:

La cuestión me suena bastante, y creo que alguna vez me puse con algo así, pero no puedo encontrarlo, así que me pondré a currar... por lo pronto, lo que recuerdo es un mensaje muy parecido en ajax: Un script para darle un preload al index, y creo que con pocos arreglos puede servir para las imágenes...
La teoría sería empezar con una imagen que al cargarse crease la siguiente (tal vez clonándose a sí misma)... podía ser un motivo de competencia, cosa que últimamente tenemos olvidado

Saludos