Podemos ver en este artículo la función de precarga de imágenes funcionando que precarga las imágenes correctamente.
Como anteriormente se ha mencionado, será el uso de la propiedad complete que detecta cuándo una imagen se ha cargado empleando JavaScript (sería similar, aunque no igual exactamente, a emplear un evento onLoad en cada etiqueta <IMG> que tuviésemos). Dicha propiedad se encuentra disponible desde Netscape Navigator v.3, pero también (y al contrario de lo que dice Luciano Moreno en su artículo) se encuentra accesible en Internet Explorer v.4, como puede verificarse en la página web oficial de Microsoft al respecto.
A continuación mostraremos el código que nos va a permitir que tres imágenes se carguen primero y luego aparezcan simultáneamente en pantalla. En el ejemplo original se usaron archivos gráficos .bmp y de un alto peso (unos 620KB cada uno), pues la página se probó descargándola de la red con una conexión de Cable; con imágenes de pocos KB no daría tiempo a comprobar el efecto, pues su aparición en pantalla tanto con precarga como sin ella sería prácticamente inmediata. Las imágenes de este artículo son las mismas que las originales, pero en formato jpg pues se trata de visualizar simplemente el ejemplo.Tenemos 3 imágenes distintas que aparecerán a la vez: foto1.bmp foto2.bmp foto3.bmp La primera estára compuesta por un Roll-Over con estados onMouseOver y onMouseOut. La imagen del centro sería la misma que aparece en la primera con el cursor sobre ella (más tarde explicaremos el por qué). La tercera es una imagen distinta,que no se usa ni en el Roll-Over ni en la central (ver fotos).
El código que precargará y mostrará todas las imágenes simultáneamente es el que sigue:
CÓDIGO 2
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">
<HTML>
<HEAD>
<SCRIPT TYPE="text/javascript">
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 <img>
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);
}
</script>
</head>
<BODY onLoad="tiempo=setTimeout('empieza()',1000);">
<H1 STYLE="white-space: pre">Aquí comienza el cuerpo del documento.
Foto 2 y Foto 3 ya se estan precargando
</H1>
<IMG NAME="roll" WIDTH=150 HEIGHT=150 onMouseOver="roll.src='foto2.bmp';" onMouseOut="roll.src='foto1.bmp';" ALT="PRECARGA FOTO 1">
<IMG NAME="foto2" WIDTH=150 HEIGHT=150 ALT="PRECARGA FOTO 2">
<IMG NAME="foto3" WIDTH=150 HEIGHT=150 ALT="PRECARGA FOTO 3">
<BR>
<H1 STYLE="white-space: pre">Aquí terminó la carga del código HTML.
La etiqueta <\HTML> viene justo debajo<H2>
</BODY>
</HTML>
FIN DE CÓDIGO 2
El funcionamiento de este código JavaScript es muy simple:
Últimas consideraciones
El empleo de la función de precarga descrito en el artículo puede usarse en cualquier página web con imágenes, sin embargo está especialmente recomendado en aquellas con gran cantidad de gráficos dinámicos que reaccionan a eventos y que poseen imágenes de proporciones considerables (que generalmente se "cortan" en otras más pequeñas llamadas sectores o slices para recomponerla como una única imagen mediante TABLAS o con posicionamiento CSS
A continuación mostraremos el código que nos va a permitir que tres imágenes se carguen primero y luego aparezcan simultáneamente en pantalla. En el ejemplo original se usaron archivos gráficos .bmp y de un alto peso (unos 620KB cada uno), pues la página se probó descargándola de la red con una conexión de Cable; con imágenes de pocos KB no daría tiempo a comprobar el efecto, pues su aparición en pantalla tanto con precarga como sin ella sería prácticamente inmediata. Las imágenes de este artículo son las mismas que las originales, pero en formato jpg pues se trata de visualizar simplemente el ejemplo.Tenemos 3 imágenes distintas que aparecerán a la vez: foto1.bmp foto2.bmp foto3.bmp La primera estára compuesta por un Roll-Over con estados onMouseOver y onMouseOut. La imagen del centro sería la misma que aparece en la primera con el cursor sobre ella (más tarde explicaremos el por qué). La tercera es una imagen distinta,que no se usa ni en el Roll-Over ni en la central (ver fotos).
El código que precargará y mostrará todas las imágenes simultáneamente es el que sigue:
CÓDIGO 2
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">
<HTML>
<HEAD>
<SCRIPT TYPE="text/javascript">
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 <img>
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);
}
</script>
</head>
<BODY onLoad="tiempo=setTimeout('empieza()',1000);">
<H1 STYLE="white-space: pre">Aquí comienza el cuerpo del documento.
Foto 2 y Foto 3 ya se estan precargando
</H1>
<IMG NAME="roll" WIDTH=150 HEIGHT=150 onMouseOver="roll.src='foto2.bmp';" onMouseOut="roll.src='foto1.bmp';" ALT="PRECARGA FOTO 1">
<IMG NAME="foto2" WIDTH=150 HEIGHT=150 ALT="PRECARGA FOTO 2">
<IMG NAME="foto3" WIDTH=150 HEIGHT=150 ALT="PRECARGA FOTO 3">
<BR>
<H1 STYLE="white-space: pre">Aquí terminó la carga del código HTML.
La etiqueta <\HTML> viene justo debajo<H2>
</BODY>
</HTML>
FIN DE CÓDIGO 2
El funcionamiento de este código JavaScript es muy simple:
- Comienza el proceso de precarga de imágenes
- Se declara la función que comprobará que están cargadas TODAS
- Se insertan las etiquetas HTML normales que empleemos en BODY.No asignamos el atributo SRC a IMG pues no deben mostrar nada hasta que JavaScript se lo indique. Tan sólo "reservamos" el ANCHO y ALTO que tendrán para que todo salga colocado en pantalla.
- Al llegar a <HTML> se invoca a la función empieza() que mediante unas variables flags estima qué imagen se ha cargado ya.
- Cada 1 segundo con setTimeout se comprueba cómo marcha la carga de imágenes y se refleja a modo orientativo en la Barra de Estado del Navegador.
- Cuando las 3 flags toman el valor TRUE se asigna una imagen a cada etiqueta <IMG> que permanecía sin contenido,a través de su atributo NAME=...
| PÁGINA CARGANDO |
 |
| PÁGINA CARGADA |
 |
Últimas consideraciones
El empleo de la función de precarga descrito en el artículo puede usarse en cualquier página web con imágenes, sin embargo está especialmente recomendado en aquellas con gran cantidad de gráficos dinámicos que reaccionan a eventos y que poseen imágenes de proporciones considerables (que generalmente se "cortan" en otras más pequeñas llamadas sectores o slices para recomponerla como una única imagen mediante TABLAS o con posicionamiento CSS
José Alberto Torres Arroyo
Ldo en Publicidad y RR.PP