Sobre las imágenes

En esta página trataré de dar ayuda sobre algunos temas que me interesan mucho y creo que a muchos webmasters también le pueden ser útil: precarga, galerías, presentaciones, etc.

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.