Conviene guardar el código siguiente en un archivo aparte, por ejemplo "loadImages.js" para poder incluirlo fácilmente en aquellos proyectos en los que necesitemos cargar varias imágenes de forma sencilla.
// loadImages.js
// arguments:
// string urls with location of images to load
// callback function
// returns:
// array of Image objects
function loadImages() { //images and callback
var n = arguments.length - 1; // number of images to load
var callback = arguments[n]
var images = new Array();
var count = 0;
for (i = 0; i < n; i++) {
images[i] = new Image();
images[i].onload = function(){
count++;
if (count == n){
callback ();
};
};
images[i].src = loadImages.arguments[i];
};
return images;
}
Uso
La función loadImages devuelve un array que contiene las imágenes cargadas. Acepta un número variable de argumentos. Los argumentos serán cadenas de texto especificando la ubicación de las imagenes a cargar, excepto el último argumento, que será la función de callback, que debe especificarse sin comillas y sin los paréntesis de la llamada, como en el siguiente ejemplo:<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="./loadImages.js"></script>
<script type='text/javascript'>
function load_done() {
text = "Images loaded:<br>";
for(var i=0; i< images.length; i++)
{
text += images[i].src + "<br>";
}
document.write(text);
}
var images = loadImages('./images/im1.jpg',
'./images/im2.jpg',
'./images/im3.jpg',
'./images/im4.jpg',
'./images/im5.jpg',
'./images/im6.jpg',
'./images/im7.jpg',
'./images/im8.jpg',
'./images/im9.jpg',
load_done);
</script>
</head>
<body>
</body>
</html>
En este ejemplo hemos especificado las ubicaciones relativas de las imágenes a cargar, pero también se podría haber usado caminos absolutos e incluso urls como
'http:\\www.lapaginaquesea.com\imagencualquiera.jpg
No hay comentarios:
Publicar un comentario