Cargador universal de imágenes en JavaScript (2)

EXPLICACION

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.write que 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.open a 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.

Autor: Blasten
http://www.blasten.com/contenidos/18829

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

- Manejadores de eventos en JavaScript
- Cuenta los caracteres escritos en un textarea con Javascript
- Iluminar Tabla
- Reordenar lista mediante mootools con Javascript
- Validación formularios en Javascript

- Versión imprimible de este documento

- Enviar por e-mail este documento