Este es el contenido del fichero "precarga.js", que se encarga en esta
página de precargar las imágenes. con la peculiariedad de poder conocer
el estado de la precarga (número de fotos cargadas, y su porcentaje).
function precargar() {
var dibujos = new Array(precargar.arguments.length);
for (var i = 0; i < dibujos.length; i ++) {
dibujos[i] = new Image();
dibujos[i].src = precargar.arguments[i]
}
return dibujos;
}
function precargados(dibujos) {
var parciales = true;
for (var i = 0; i < dibujos.length; i ++)
parciales = (parciales && dibujos[i].complete);
return parciales;
}
function porciento(dibujos) {
var parciales = 0;
for (var i = 0; i < dibujos.length; i ++)
parciales += (dibujos[i].complete) ? 1 : 0;
return parseInt(100 * parciales / dibujos.length);
}
function precargaFichas(x) {
var dibujos = new Array(x.length);
for (var i = 0; i < dibujos.length; i ++) {
dibujos[i] = new Image();
dibujos[i].src = x[i].imagen;
}
return dibujos;
}
El funcionamiento es bastante sencillo. Se crea un array con las fotos
y luego se devuelve para poder chequear el estado.
Para chequear el estado tenemos los métodos precargados(dibujos) y
porciento(dibujos). El primero nos indica si todos los elementos
del array dibujos se encuentran en memoria... Las imágenes tienen
la propiedad "complete" con valores true/false (cierto/falso) que
indican que están en memoria.
El segundo método devuelve el porcentaje de imágenes totalmente
cargadas (1..100), es muy útil si se quiere mostrar una barra de progreso
de la carga.
En el "Proyector de Diapositivas" se puede ver un ejemplo de uso de estos 2
métodos.
Consideraciones:
Una precarga tan solo deja las imágenes en memoria para ser usadas en la
página activa, y no implica que se muestren las imágenes.
Ejemplo de precarga con barra de estado:
El siguiente ejemplo muestra un código simple de precarga con barra de estado:
var imagenes;
function continuar() {
alert("Ok.");
}
function cargando() {
document.getElementById("porcentaje").style.width = porciento(imagenes) + "%";
if (precargados(imagenes))
continuar();
else
setTimeout("cargando()", 100);
}
function ini() {
imagenes = new precargar(
"fotos/maxi/Diapositiva52.jpg",
"fotos/maxi/Diapositiva62.jpg",
"fotos/maxi/Diapositiva66.jpg",
"fotos/maxi/Diapositiva73.jpg",
"fotos/maxi/Diapositiva81.jpg",
"fotos/maxi/Diapositiva82.jpg",
"fotos/maxi/Diapositiva91.jpg",
"fotos/maxi/Diapositiva95.jpg",
"fotos/maxi/Diapositiva100.jpg"
);
cargando();
}
Solo falta indicar donde se muestra el porcentaje... Como se ve en
la función "cargando" es necesario una capa (elemento div u otro)
con un identificador id (en el ejemplo id="estado") que tiene que estar
dentro de otra capa.
El caso del ejemplo es el siguiente:
<div id="preProyector" style="width: 100%; background-color: white;" >
<div id="porcentaje" style="width: 0%; height: 10px; background-color: red;">
</div>
</div>
Un buen uso para la función continuar sería ocultar la capa que ha sido usada en la precarga.
La galería que se ve en esta página no muestra todas las posibilidades del
fichero galeria.js, comprimido para su descarga en este fichero:
galeria.zip.
En la página sucaricatura.com
se puede apreciar toda la funcionalidad de esta galería. Dispone también de una
presentación parecida a la que se ve a continuación, en esta página, en el apartado
"proyector de diapositivas".
Se puede ver el funcionamiento pinchando en
este enlace.
Una presentación de fotografías es algo muy sencillo, dependiendo
de los elementos que nos interese usar... precarga, transiciones,
eventos del teclado o controles, etc.
Vamos a usar las fotos que se ven en la galería que nos precede.
En la siguiente página se puede ver un ejemplo simple de simulación
de un proyector de diapositivas: proyector.
Tener este proyector no podía ser más fácil... tan solo hay que
