Se presenta un script para cargar imágenes a usar en la página.
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.
INICIO DE CODIGO
<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;">
<!-- cuerpo de la pagina -->
</BODY>
</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;">
<!-- cuerpo de la pagina -->
</BODY>
</HTML>
FIN DE CODIGO
Explicación:
En un Array metemos las rutas relativas de todas las imágenes a precargar. En este caso,se encuentran todas en la carpeta Imágenes, pero no hay problema en que estén en varias diastintas mientras se indique en el array la ruta correcta.
El script crea automáticamente las referencias a cada objeto imagen para poder tener acceso a cada objeto y a sus propiedades. La denominación automática es imagen0,imagen1,imagen2..[...]..imagen+miArray.length-1
La línea de código
patron = RegExp("imagenes/");
y más adelante:
+ miArray[cont].replace(patron,"")
son pura estética. Con ambas indicamos a document.writeque de los argumentos del Array omita escribir en pantalla la subcadena: "imagenes/" para no mostrar la ruta completa, pues en ciertos casos ésta podría ser bastante larga si tenemos una ruta demasiado larga. Si las rutas fuesen por ejemplo "paginainicio/articulos/electrónica/imágenes/camaras..."
"paginainicio/articulos/electrónica/imágenes/moviles..."
podríamos asignar:
patron = RegExp("paginainicio/articulos/electrónica/imágenes/");
para omitir en cada imagen cargada esa cadena.
Lo mismo ocurre con las etiquetas <DIV> ...</DIV>se han utilizado para que el usuario mediante hojas de Estilo incrustadas o por el atributo STYLE de DIV defina cómo se van a mostrar las líneas que nos informan del progreso de carga en pantalla: colores,tamaños,fondo,bordes,etc. Otro aspecto meramente de Forma.
Finalmente, cuando el navegador lee la última etiqueta HTML se llama repetidamente a una función function pruebaCarga()que comprueba el estado de CADA imagen.Sobre los tiempo de llamada (medio segundo en el ejemplo, o 500 milisegundos) conviene no abusar poniendo valores como 1 milisegundo o en general valores más bajos de 250 o 300 pues podríamos forzar demasiado los recursos del navegador y ,según en qué casos, obtener un error de"out of memory".
Cada imagen que se detecta como cargada se reflejará en la barra de estado del navegador (esquina inferior izquierda) y el total de las que hay. Finalmente, cuando todo está cargado la página nos autoconduce con window.opena inicio.html donde ya podremos hacer libre uso de todas las imágenes.
Podemos comprobar que todo ha funcionado de una forma simple: borramos antes de nada la Caché de nuestro navegador y lo configuramos en "Actualizar la página cada vez que se visita". A continuación ejecutamos la página cargadora de imágenes. Al terminar veremos en Herramientas/Opciones de Internet/Configuración/Ver Archivos (en caso de Internet Explorer) que efectivamente las imágenes han "bajado" correctamente, pese a no advertir el clásico aviso del navegador de "Cargando imagen...", pues todo se hace en segundo plano.
Si volvemos a cargar la página una segunda vez, veremos que en la barra de Status las imágenes se cargan a una gran velocidad, pues se detecta que ya están en la caché y no hay necesidad de volver a cargarlas.
AVISO IMPORTANTE
Para probar el código es necesario "colgar" realmente las páginas en internet, o al menos que las rutas indicadas en el Array apunten a cualquier carpeta contenedora de imágenes en internet. Si probamos el ejemplo en "Local", en nuestro propio Pc, con las imágenes también en nuestro ordenador, el script parece no funcionar, pero sólo parece. Esto es así porque el Navegador no almacena las imágenes en su Caché, pues detecta que YA se encuentran en nuestro disco duro y no hay necesidad de "bajarlas". Para que el Status"Imagen4/x Cargada" se visualice en tiempo real,la ventana debe de tener el foco activo.Si al ejecutar la página la minimizamos, el script seguirá ejecutándose correctamente y precargando, pero sólo al seleccionarla otra vez veremos el nuevo Status actualizado.
Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros cursos de Programación visita www.uneweb.com para más información.
Fuente:enlace
No hay comentarios:
Publicar un comentario