Cita:
Iniciado por Panino5001 
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.