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.
<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>
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"];
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
}
});
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"));
<!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.
Usuarios: 
23 de marzo de 2011
Valoración del artículo:
