Anónimo
Evitar cuadro vacío en carga imágenes
Hola Jordi, estoy haciendo por primera vez una página Web de un pequeño negocio que tengo entre manos. Me he metido con el Microsoft Publisher porque no tengo tiempo ni ganas de aprender HTML ni otros lenguajes, ya que soy "de letras".
El problema que tengo es que cuando subo el resultado al servidor y cargo la página, al aparecer los gráficos primero sale el cuadro que los contiene (el que se queda fijo cuando no encuentra el archivo gráfico) y luego ya carga la imagen, generando un efecto muy antiestético que no veo en otras páginas de internet, incluso las más sencillas. Te dejo un link de unos gráficos que he subido para que veas el efecto.
http://personales.ya.com/scarrero/
Lo que yo quiero es que aparezca la imagen sin más, aunque tarde en cargar, sin la transición del recuadro.
Muchas gracias Jordi
El problema que tengo es que cuando subo el resultado al servidor y cargo la página, al aparecer los gráficos primero sale el cuadro que los contiene (el que se queda fijo cuando no encuentra el archivo gráfico) y luego ya carga la imagen, generando un efecto muy antiestético que no veo en otras páginas de internet, incluso las más sencillas. Te dejo un link de unos gráficos que he subido para que veas el efecto.
http://personales.ya.com/scarrero/
Lo que yo quiero es que aparezca la imagen sin más, aunque tarde en cargar, sin la transición del recuadro.
Muchas gracias Jordi
Respuesta de jordi_oller
1
Has de utilizar la precarga de imágenes, para que carguen las imágenes antes que el html.
Para ello puedes buscarlo en google, como por ejemplo esto:
a=new Image(1, 1);
a.src="transparente.gif";
x=new Image(150,150); //la x no tiene por q llamarse roll, que es el NAME de
x.src="foto1.bmp";
y=new Image(150,150);
y.src="foto2.bmp";
z=new Image(1, 1);
z.src="foto3.bmp";
flagx=false, flagy=false, flagz=false;
function empieza() {
if (x.complete) flagx=true;
if (y.complete) flagy=true;
if (z.complete) flagz=true;
window.status="Foto1 Cargada: " + x.complete + " Foto2 Cargada: " + y.complete + " Foto3 Cargada: " + z.complete;
if (flagx && flagy && flagz) {
roll.src="foto1.bmp";
foto2.src="foto2.bmp";
foto3.src="foto3.bmp";
clearTimeout(tiempo);
}
else tiempo=setTimeout('empieza()',1000);
}
Aquí comienza el cuerpo del documento.
Foto 2 y Foto 3 ya se están precargando
Aquí terminó la carga del código HTML.
La etiqueta viene justo debajo
Para ello puedes buscarlo en google, como por ejemplo esto:
a=new Image(1, 1);
a.src="transparente.gif";
x=new Image(150,150); //la x no tiene por q llamarse roll, que es el NAME de
x.src="foto1.bmp";
y=new Image(150,150);
y.src="foto2.bmp";
z=new Image(1, 1);
z.src="foto3.bmp";
flagx=false, flagy=false, flagz=false;
function empieza() {
if (x.complete) flagx=true;
if (y.complete) flagy=true;
if (z.complete) flagz=true;
window.status="Foto1 Cargada: " + x.complete + " Foto2 Cargada: " + y.complete + " Foto3 Cargada: " + z.complete;
if (flagx && flagy && flagz) {
roll.src="foto1.bmp";
foto2.src="foto2.bmp";
foto3.src="foto3.bmp";
clearTimeout(tiempo);
}
else tiempo=setTimeout('empieza()',1000);
}
Aquí comienza el cuerpo del documento.
Foto 2 y Foto 3 ya se están precargando
Aquí terminó la carga del código HTML.
La etiqueta viene justo debajo
Antes de preguntarte ya había probado a meter scripts esos de precarga editando el index.htm, y no sé si lo hago mal el caso es que se veía el efecto de precarga (incluso en algún script las letars de "espere...") pero al final siempre salen los marquitos esos vacíos. Yo no veo que eso pase en ninguna web, hasta en las más cutres, por eso me parecía que tiene que ser algo fácil ¿seguro qué me explico bien?
El código se ve mal por lo que veo... todoexpertos lo recorta...
Yo en esa web no veo que en el body lances ningún preload images...
Has de hacerlo y luego ponerlo dentro de cada <img ...
Yo en esa web no veo que en el body lances ningún preload images...
Has de hacerlo y luego ponerlo dentro de cada <img ...