Cargador universal de imágenes en JavaScript

El propósito del script que puede verse/descargarse más abajo tiene como objeto utilizar un único javascript que nos sirva SIEMPRE y en cualquier página web para cargar las imágenes que se vayan a utilizar. El ya utilizado en el punto 13 de este manual es válido igualmente, pero está enfocado a las 3 imágenes concretas del ejemplo, guardadas en unas rutas/directorios concretos y que utiliza 3 variables flags que dan por sentado que sólo precargaremos esas 3 imágenes. De esto, deducimos que para adaptar ese script a nuestra Web particular habría que modificar el código sustancialmente, lo que sería bastante engorroso.

Lo que proponemos con el siguiente código es:

1. Transformar el script ya conocido para adaptarlo a un uso global.

2. Con un mínimo esfuerzo indicaremos rutas,nombres de imágenes,Variables y Aspecto de la Precarga de TODAS las imágenes.

3. El ejemplo concreto está orientado a una página web home.html, por ejemplo, que es donde se precarga todo y que al terminar nos redirige al verdadero inicio de nuestra página inicio.html, que es donde se emplearán todas las imágenes cargadas.

<HTML>
<HEAD><TITLE>Cargando Imagenes</TITLE>

<STYLE TYPE="text/css">

DIV { background-color: black; color: white; border: 2px solid red; width: 30% }

</STYLE>
<SCRIPT TYPE="text/javascript">
//Script por José.A Torres
//Majadahonda 2003

miArray = new Array ("imagenes/ElMenu_over00.jpg","imagenes/foto1.bmp","imagenes/foto2.bmp",
"imagenes/foto3.bmp","imagenes/pedazo1.jpg","imagenes/pedazo2.png",
"imagenes/pedazo3.jpg","imagenes/pedazo5.jpg","imagenes/pedazo6.png",
"imagenes/pedazo7.png","imagenes/pedazo8.jpg","imagenes/pedazo9.jpg");
document.write("IMAGENES BAJANDO A LA CACHE DE SU NAVEGADOR<BR>");
patron = new RegExp("imagenes/");
for (cont=0;cont<miArray.length;cont++) {
document.write("<DIV NAME='capa'>");
document.write("Imagen: " + miArray[cont].replace(patron,""));
document.write("<br>");
document.write("...en cola de Precarga OK<br></DIV>");
eval ("imagen" + cont + " = new Image();");
eval ("imagen" + cont + ".src = " + """ + miArray[cont] + "";");

}
document.write("TODAS LAS IMAGENES YA ESTAN EN PRECARGA");
cont=0;
function pruebaCarga() {

if (eval("imagen"+cont).complete == true) {
window.defaultStatus= "Imagen"+cont+ "/" + miArray.length + " CARGADA";
cont++;

}

if (cont<miArray.length) setTimeout('pruebaCarga()',500);
else {
window.defaultStatus="Carga de imágenes TERMINADA";
window.open("inicio.html","MenuPrincipal","fullscreen=yes");
}
}
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#808AC2" onLoad="pruebaCarga();return true;">

</BODY>
</HTML>

Usuarios que han visto este tema también han visto...

- Scroll de noticias con Javascript
- Prueba ultima modificación
- Introducción a AJAX con PHP y formularios
- Detectar el idioma y país del usuario con Javascript
- Imágenes con efecto polaroid usando JavaScript

- Versión imprimible de este documento

- Enviar por e-mail este documento