Editando apunte: Precarga de imágenes

Editando apunte: Precarga de imágenes cerrar apuntes

ID: 61 (tabla: apuntes) Título:
Fecha: [poner fecha actual ]
Categorías: Vicisitudes de un Webmaster, Programación
Etiquetas: accesibilidad, diseño, imágenes, javascript, webmaster
Extras: accesibilidad, diseño, imágenes, javascript, webmaster
apunte: - - - - - - - -

<p>
	[rss]Hasta el momento no hemos mencionado el tema de las precargas, pero con la serie de apuntes sobre transiciones, decidimos implementarla, y de paso hablar de ellas.[/rss]
</p>
<p>
	En el apunte <a href="?titulo=Transiciones%3A+Van+m%E1s+de+cien&PHPSESSID=6dtjt8qklc11ob46aj0bm9ecb2">Transiciones: Van más de cien</a>, antes de retocarlo con la implementación de la precarga, se veía un poco estético solapamiento de capas. 
</p>
<h3 class="subtitulo">
	Las alternativas
</h3>
<p>
	En este caso concreto, al igual que en otros casos hay más de una solución para mejorar el aspecto visual de la presentación, y hemos optado por no disponer de las imágenes hasta que se cargue la página. Otra opción sería tener las imágenes ocultas con estilos "css" (display o visibility); incluso podríamos crear las capas a usar con sus imágenes al abrir la página. Por ahora no vamos a plantear sistemas con mayor complejidad. 
</p>
<div id="precarga_capas" style="position: relative; overflow: hidden; border: 3px solid blue; margin: .5em 1em .5em .5em; width: 240px; height: 180px; float: left">
	<div id="precarga_capa1" style="position: absolute; width: 240px; height: 180px; background: url(diario.jocker.php?extra=mini&url=imagenes/fotos/maxi/Diapositiva52.jpg&max=240) no-repeat center center">
	</div>
</div>
<p>
	En esta página, a las izquierda de este párrafo, tenemos una réplica de la presentación mencionada a mitad de tamaño (240x180), pero tan solo cargamos una capa con su imagen sin más, para iniciar las transiciones, primero mostraremos el porcentaje de carga superponiendo una capa tal como hemos visto en el apunte: <a href="?titulo=Diapositivas+en+sucaricatura.com&PHPSESSID=6dtjt8qklc11ob46aj0bm9ecb2">Diapositivas en sucaricatura.com</a>, luego crearemos las capas e iremos mostrando el porcentaje de carga; y al final eliminaremos esa capa con el porcentaje y habilitaremos el botón para activar la presentación con las transiciones.
</p>
<p>
	Pondremos muy pocos controles, el que tiene mayor importancia en este apunte es el primero activo, y que es precisamente el que inicia la precarga; también en el mismo apartado tenemos otro botón para volver al estado inicial.
</p>
<form action="" method="get" style="clear: both"><input type="hidden" name="PHPSESSID" value="6dtjt8qklc11ob46aj0bm9ecb2" />
	<fieldset>
		<legend>
			Controles
		</legend>

<fieldset style="float: left; width: 30%">
			<legend>
				Carga
			</legend>
			<button type="button" id="precarga_inicial" >
				INICIO
			</button>
			<button type="button" id="precarga_final" disabled="disabled" >
				FIN
			</button>
		</fieldset>

<fieldset style="float: right; width: 60%">
			<legend>
				Presentación
			</legend>
			<button type="button" id="efecto_iniciar" disabled="disabled" >
				INICIAR
			</button>
			<button type="button" id="efecto_detener" disabled="disabled" >
				DETENER
			</button>
			<label for="nombre_efecto" >efecto: </label>
			<input type="text" name="efecto" id="nombre_efecto" readonly="readonly" />
		</fieldset>
	</fieldset>
</form>
<br/>
<p>
	Detallamos a continuación el comportamiento de los controles:
</p>
<dl>
	<dt style="text-decoration: underline; font-weight: bold">
		Carga->INICIO
	</dt>
	<dd  style="background-color: #eeeddd; margin: .5em">
		<p>
			Es el botón más importante ya que es donde se hace la precarga, que es el motivo de este apunte.
			Su comportamiento es secuencial y comienza deshabilitandose a sí mismo para evitar "dedos flojos"; luego se crea la barra de progreso para mostrar el porcentaje de carga; acto seguido se crean las capas de la presentación a la vez que también se crean todos los objetos "Image" para llevar el control de la carga.
		</p>
		<p>
			Para el control de la carga consultamos la propiedad complete de todas las imágenes que hemos creado y calculamos el porcentaje para mostrarlo
		</p>
		<p>
			Cuando comprobamos que se han cargado todas las imágenes eliminamos el elemento que mostraba ese porcentaje y habilitamos los botones que nos interesa.
		</p>
	</dd>

<dt style="text-decoration: underline; font-weight: bold">
		Carga->FIN
	</dt>
	<dd  style="background-color: #eeeddd; margin: .5em">
		<p>
			Vuelta a empezar. La secuencia será: mostrar la capa inicial, eliminar las creadas en la precarga y habilitar o deshabilitar botones.
		</p>
	</dd>
</dl>

<p>
	No hemos mencionado las acciones del resto de controles (del recuadro Presentación) porque no tienen importancia en la precarga.
</p>
<h3 class="subtitulo">
	Paso a paso
</h3>
<p>
	Cuando se carga la página, se asignan los comportamientos para cada botón, pero el único habilitado es el que vale para cargar las imágenes de la presentación:
</p>
<pre class="codigo">function precarga_inicio()	{
	tag("precarga_inicial").disabled = true;

porcentaje = document.createElement("div");
	porcentaje.id = "precarga_porcentaje";
	porcentaje.style.opacity = "0";
	porcentaje.style.top = "0";
	porcentaje.style.left = "0";
	porcentaje.style.width = "100%";
	porcentaje.style.height = "100%";
	porcentaje.style.position = "absolute";
	porcentaje.style.backgroundColor = "transparent";

porcentaje_valor = document.createElement("div");
	porcentaje_valor.id = "precarga_porcentaje_valor";
	porcentaje_valor.style.top = "40%";
	porcentaje_valor.style.left = "10%";
	porcentaje_valor.style.width = "80%";
	porcentaje_valor.style.height = "20%";
	porcentaje_valor.style.opacity = "0.7";
	porcentaje_valor.style.position = "absolute";
	porcentaje_valor.style.backgroundColor = "white";
	porcentaje_valor.style.border = "2px ridge blue";

porcentaje_valora = document.createElement("div");
	porcentaje_valora.id = "precarga_porcentaje_valora";
	porcentaje_valora.style.top = "0";
	porcentaje_valora.style.left = "0";
	porcentaje_valora.style.width = "0";
	porcentaje_valora.style.height = "100%";
	porcentaje_valora.style.position = "absolute";
	porcentaje_valora.style.backgroundColor = "red";

porcentaje_valor.appendChild(porcentaje_valora);
	porcentaje.appendChild(porcentaje_valor);
	tag("capas").appendChild(porcentaje);

for (i = 100; i > 0; i--)	{
		accion = "tag('precarga_porcentaje').style.opacity = '" + (i / 100) + "'";
		setTimeout(accion, i * 20);
	}
	setTimeout(cargar_capas, 2100);
}

var parejas_precarga = [
	{"capa": "capa2", "fondo": "diario.jocker.php?extra=mini&url=imagenes/fotos/maxi/Diapositiva62.jpg&max=240"},
	{"capa": "capa3", "fondo": "diario.jocker.php?extra=mini&url=imagenes/fotos/maxi/Diapositiva66.jpg&max=240"},
	{"capa": "capa4", "fondo": "diario.jocker.php?extra=mini&url=imagenes/fotos/maxi/Diapositiva73.jpg&max=240"},
	{"capa": "capa5", "fondo": "diario.jocker.php?extra=mini&url=imagenes/fotos/maxi/Diapositiva81.jpg&max=240"},
	{"capa": "capa6", "fondo": "diario.jocker.php?extra=mini&url=imagenes/fotos/maxi/Diapositiva82.jpg&max=240"},
	{"capa": "capa7", "fondo": "diario.jocker.php?extra=mini&url=imagenes/fotos/maxi/Diapositiva91.jpg&max=240"},
	{"capa": "capa8", "fondo": "diario.jocker.php?extra=mini&url=imagenes/fotos/maxi/Diapositiva95.jpg&max=240"},
	{"capa": "capa9", "fondo": "diario.jocker.php?extra=mini&url=imagenes/fotos/maxi/Diapositiva100.jpg&max=240"}
];

var imagenes_precarga = [];

function cargar_capas()	{
	_pares_ = [];
	for (i = 0, total = parejas_precarga.length; i < total; i++)
		_pares_.push(parejas_precarga[i]);
	while(_pares_.length > 0)	{
		pareja = _pares_.pop();
		imagen = new Image();
		imagen.src = pareja.fondo;
		capa = document.createElement("div");
		capa.id = pareja.capa;
		capa.style.background = "url(" + pareja.fondo + ") no-repeat 0 0";
		capa.style.width = "240px";
		capa.style.height = "180px";
		capa.style.top = "0";
		capa.style.left = "0";
		capa.style.position = "absolute";
		tag("capas").insertBefore(capa, tag("capa1"));
		imagenes_precarga.push(imagen);
	}
	precargando();
}</pre>
<p>
	Ahora nos toca ver el código de la precarga y las acciones cuando ésta halla terminado:
</p>
<pre class="codigo">_capas_ = ["capa1", "capa2", "capa3", "capa4", "capa5", "capa6", "capa7", "capa8", "capa9"];
var _nombres_ = new Array();
var _efectos_;

function activar_controles()	{
	tag("capas").removeChild(tag("precarga_porcentaje"));
	_efectos_ = new objetoTransiciones(1000, 100, 240, 180, _capas_, "capa1", "capas");
	_actual_ = 9;
	for(_n_ in _efectos_)
		if (_n_.charAt(1) == "_") _nombres_.push(_n_);
	tag("efecto_iniciar").disabled = false;
	tag("precarga_final").disabled = false;
}
</pre>
<p>
	Vemos que "precargando" es un bucle temporizado que termina llamando al método "activar_controles", que en primer lugar borra la capa donde se mostraba el porcentaje de carga (en condiciones normales basta con ocultarla), Luego se crea el objeto "_efectos_" que nos servirá en la presentación para terminar activando los botones necesarios.
</p>

<h3 class="subtitulo">
	Notas finales
</h3>
<p>
	A pesar de lo interesante que pueda parecer realizar una precarga de imágenes (motivo de este apunte), solo me parecen aconsejables en casos muy concretos como en el que la hemos aplicado en este ejemplo.
</p>
<p>
	Tal como recordamos constantemente, casi todas las cosas que estamos planteando pueden realizarse de más de una manera. Un ejemplo es en este caso concreto la consulta del atributo complete de las imágenes. La alternativa más lógica sería programar el evento de carga de las imágenes (load), que se dispara cuando estás se cargan, pero lamentablemente en mi opinión está mal implementado en algunos navegadores ya que si programamos una respuesta al activarse el mismo, puede haber casos que no obtengamos resultados ya que no siempre se dispara el evento, incluso asignando la dirección de esa imagen después de la implementación de éste.
</p>
<p>
	Aunque pueda parecer un código muy extenso, la verdad es que solo hay que fijarse en el método precargando; y si bien creamos objetos del tipo "Image", si las imágenes no se usan como fondo de capas, puede consultarse directamente el atributo en las etiquetas "img" del código <a href="http://es.wikipedia.org/wiki/HTML">html</a> de la página.
</p>

Controles Otras tablas: imagenes, postales, categorias, etiquetas, extras - - (popup ) - que

Seleccionar nuevo apunte

categoria Nombre:
Controles Otras tablas: apuntes, imagenes, postales, etiquetas extras - - Seleccionar: categoria
Descripción: - - - - - - - -	Apuntes

extra Nombre:
Controles Otras tablas: apuntes, imagenes, postales, categorias etiquetas - - Seleccionar: extra
Descripción: - - - - - - - -	Apuntes

etiqueta Nombre:
Controles Otras tablas: apuntes, imagenes, postales, categorias extras - - Seleccionar: etiqueta
Descripción: - - - - - - - -	Apuntes

Editor del diario

Zona de comentarios

Evaluación