Carga de imágenes con la página ya servida

PeterTheWall · #1 (**permalink**) 21/01/2011, 09:57

Hola! Antes de nada comentaros que no sé nada de ajax. Así que si lo que os comento es básico, disculpad. Bueno, ojala sea básico!! ;) Bueno, yo tengo una web que muestra una noticia. Esta noticia va vinsulada a unas cuantas imágenes. Estas imgágenes están en un servidor externo. La web la hago en PHP. Al cargar la web, como tiene que traerme las imágenes de otros servidores, tarda mucho en mostrarse. Me han comentado que ajax, podría solucionarse. Cargando primero la parte de las noticias, y las imagenes las iría mostrando a medida que las recuperase del/los servidores externos. Mientras no carga la imagen, saldría el típco relojito... Alguien podría darme alguna idea, o decirme cómo puedo hacelo?? Muchas gracias por vuestro tiempo.

IsaBelM · #2 (**permalink**) 21/01/2011, 14:29

si se trata de mostrar una imagen de cargando, como parece, no es necesario que ocupes ajax. puedes superponer imágenes. en el bloque, por ejemplo div, puedes mostrar la imagen de cargando y una vez que recibas la imagen la colocas encima. a grandes rasgos esta es la idea

PeterTheWall · #3 (**permalink**) 21/01/2011, 14:56

Muchas gracias!! Excelente idea!! Parece una manera genial de solucionarlo!!!! Lo que yo ya habñia encontrado una manera con JS. En el onLoad pregunto si estan todas las imagenes cargadas. En el momento que eso ocurre, es cuando escribo realmente el SRC de las imagenes!
Pero slo por curiosidad... como se haria eso de superponer imagenes... es decir... si yo programo en PHP, ¿Cómo sé cuándo se han cargado realmente las imágenes, y por lo tanto debo colocar estas en lugar del div con al imagen "Cargando"?

IsaBelM · #4 (**permalink**) 22/01/2011, 06:10

sonaba bien, verdad?? no sé en que estaba pensando cuando dije "superponer imágenes". se trata de modificar el dom
un código montado por caricatos. lo he modificado un poco para adaptarlo a tus necesidades

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="es" xml:lang="es">
<head>
<title>Documento sin título</title>
<script type="text/javascript">
function precargar() {
var dibujos = new Array(precargar.arguments.length);
for (var i = 0; i < dibujos.length; i ++) {
dibujos[i] = new Image();
dibujos[i].src = precargar.arguments[i]
}
return dibujos;
}

function precargados(dibujos) {
var parciales = true;
for (var i = 0; i < dibujos.length; i ++) {
document.getElementById('img'+i).src = dibujos[i].src;
parciales = (parciales && dibujos[i].complete);
}
return parciales;
}

function cargando() {
if (!precargados(imagenes))
setTimeout("cargando()", 100);
}

var imagenes;
function ini() {
imagenes = new precargar("img1.gif",
"img2.gif",
"img3.gif"
);
cargando();
}
</script>
</head>
<body onload="ini()">
<div><img id="img0" src="precarga.gif" /></div>
<div><img id="img1" src="precarga.gif" /></div>
<div><img id="img2" src="precarga.gif" /></div>
</body>
</html>

aquí tienes el código original

PeterTheWall · #5 (**permalink**) 24/01/2011, 17:42

Perdona que no te contestase antes! iba liado... he hecho algo parecido. Lo que, en lugar de emplear "complete" he utilizado el metodo "onload" de la imagen... he leído en lagún artículo que decían que es más fiable que el complete. Pero la idea es la que tú planteas... de veras que te lo agradezco!!! Dios mio! qué nivel tenéis!!!