Cómo realizar una precarga de un conjunto de imágenes y saber cuando todas han sido cargadas para realizar acciones con las imágenes.
Hasta el momento habíamos explicado varias formas de hacer precarga de imágenes con Javascript estándar, pero realmente, ahora que existen distintos frameworks Javascript, es más cómodo utilizar uno de ellos, antes de tener que crear el sistema por nuestra cuenta. Además de simplificarnos la vida, tendremos varias ventajas que serán interesantes y que podremos implementar con pocas líneas de código, como veremos a continuación.
Para esta práctica hemos utilizado el Framework Javascript Mootools, puesto que tenemos experiencia con él en varios proyectos y por tanto resulta sencillo de explicarlo ahora para las personas interesadas. En dicho framework existen clases (de POO) "opcionales" que están dentro de las librerías que llaman "more" y una de ellas es Asset, que sirve para cargar dinámicamente varios tipos de recursos que luego podremos utilizar en la página, cuando la carga haya sido concluida.
Una vez conseguido el archivo del "more" de Mootools, en el que habremos incluido al menos la funcionalidad de "more" (común a todos los usos de estas librerías) y la de "Asset" (para la precarga propiamente dicha), podemos hacer nuestros scripts de precarga de una manera sencilla, siguiendo estos pasos.
Incluir Scripts Mootools
Debemos incluir en la cabecera del HTML los scripts de Mootools y el More.
<script src="mootools-core-1.3.1.js" type="text/javascript"></script>
<script src="mootools-more-1.3.1.1.js" type="text/javascript"></script>
Definir un array con imágenes
Con Assets podremos precargar una única imagen o un conjunto de ellas. Veremos la opción de cargar un conjunto de imágenes, que será mucho más habitual y por tanto más útil para los interesados.Tenemos que definir un array con las cadenas de las rutas de las imágenes a incluir, como el siguiente.
var arrayImagenes = ["img1.gif", "loquesea.jpg","otra.gif"];
Precargar las imágenes con Asset
Ahora podremos precargar las imágenes con la función Asset.images(), que recibe el array de las rutas de las imágenes y un objeto de opciones, a través del que podemos asignar algunos eventos a las imágenes cargadas.En concreto, en ese objeto que pasamos como segundo parámetro a Asset.images(), existe una propiedad que nos resultará especialmente útil. Es un evento "onComplete" que podemos utilizar para asignar una función que se ejecutará cuando todas las imágenes hayan sido cargadas.
var imagenesPrecargadas = Asset.images(arrayImagenes, {
onComplete: function(){
//acciones a realizar cuando las imágenes hayan sido cargadas
}
});
Usar el array de elementos IMG
Como vemos en el anterior paso, Asset.images() nos devuelve un valor, que no es más que un array con los elementos IMG de todas las imágenes cargadas. Esas imágenes no aparecerán en la página por ningún sitio, sino que tendremos que ponerlas nosotros donde deseemos que aparezcan.Por ejemplo, podríamos insertar la imagen con índice 0 en el HTML de la página, en una capa llamada "capaimagenes":
imagenesPrecargadas[0].injectInside($("capaimagenes"));
Ejemplo completo de precarga de imágenes con Mootools
Ahora, para ver todo el proceso de precarga resumido en un único código, mostramos un pequeño ejercicio de carga de imágenes y su posterior presentación, una vez todas han sido descargadas por el navegador del usuario.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
>
<html lang="es">
<head>
<title>Assets percarga de imágenes Mootools</title>
<script src="mootools-core-1.3.1.js" type="text/javascript"></script>
<script src="mootools-more-1.3.1.1.js" type="text/javascript"></script>
<script type="text/javascript">
var arrayImagenes = ["assets-imagenes/825.gif", "assets-imagenes/1073.gif","assets-imagenes/765.gif","assets-imagenes/1.gif", "assets-imagenes/489.gif"]
var imagenesPrecargadas = Asset.images(arrayImagenes, {
onComplete: function(){
imagenesPrecargadas.each(function(valor, indice){
valor.injectInside($("capaimagenes"));
})
}
});
</script>
</head>
<body>
<h1>Precarga de imágenes con Mootools</h1>
<div id="capaimagenes"></div>
</body>
</html>
Esperamos que con las anteriores explicaciones se pueda entender bien este código. Sólo quizás habría que comentar un único detalle no relatado previamente. El array de imágenes precargadas lo tenemos en la variable imagenesPrecargadas. Dado que es un Array, hacemos un recorrido por cada uno de sus elementos con el método each() de Mootools. En dicho recorrido simplemente vamos insertando cada uno de los elementos IMG del array dentro de la capa con id "capaimagenes".
Si lo deseas, puedes ver este ejemplo en marcha en una página aparte.
Las aplicaciones de la precarga de imágenes son muy amplias. En el próximo artículo veremos un ejemplo de uso de lo que acabamos de aprender, creando un slide (pase de diapositivas) de una serie de imágenes, que habremos precargado previamente.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...