logo El diario de Pepe Molina (Caricatos)

yo

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.


Última caricatura

IV Asamblea de la AEC: IV Asamblea General de la Asociación Española de Caricaturistas

IV Asamblea de la AEC

RSS de las imágenes: rss


La Cita

El ver mucho y leer mucho aviva los ingenios de los hombres

Miguel de Cervantes Saavedra, escritor español (1547-1616).


En esta zona están las páginas personales del autor.


Mis clientes ahora también son mis amigos (aunque les cobre).


En Mis amigos Informáticos hay una pequeña colección de páginas de colegas webmasters..


En Mis amigos artistas podemos encontrar artistas de cualquier índole (dibujantes, pintores, escritores...)


Las recomendaciones que proponemos son de índole variada.


Aquí un cajón de sastre de enlaces.


Nos referencian desde sitios de toda índole.


Puede contribuir a mantener esta página con su donativo.


botón pay-pal

Precarga de imágenes

emoticón de Caricatos Publicado el día 14 de diciembre de 2011
id=61; categorías: Vicisitudes de un Webmaster, Programación

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.

En el apunte Transiciones: Van más de cien, antes de retocarlo con la implementación de la precarga, se veía un poco estético solapamiento de capas.

Las alternativas

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.

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: Diapositivas en sucaricatura.com, 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.

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.

Controles
Carga
Presentación

Detallamos a continuación el comportamiento de los controles:

Carga->INICIO

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.

Para el control de la carga consultamos la propiedad complete de todas las imágenes que hemos creado y calculamos el porcentaje para mostrarlo

Cuando comprobamos que se han cargado todas las imágenes eliminamos el elemento que mostraba ese porcentaje y habilitamos los botones que nos interesa.

Carga->FIN

Vuelta a empezar. La secuencia será: mostrar la capa inicial, eliminar las creadas en la precarga y habilitar o deshabilitar botones.

No hemos mencionado las acciones del resto de controles (del recuadro Presentación) porque no tienen importancia en la precarga.

Paso a paso

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:

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();
}

Ahora nos toca ver el código de la precarga y las acciones cuando ésta halla terminado:

_capas_ = ["capa1", "capa2", "capa3", "capa4", "capa5", "capa6", "capa7", "capa8", "capa9"];
var _nombres_ = new Array();
var _efectos_;

function precargando()	{
	cargadas = 0;
	total = imagenes_precarga.length;
	for (i = 0; i < total; i++)
		cargadas += (imagenes_precarga[i].complete) ? 1 : 0;
	porcentaje = 100 / (total / cargadas);
	tag("precarga_porcentaje_valora").style.width = porcentaje + "%";
	if (porcentaje == 100)	{
		for (i = 100; i > 0; i--)	{
			accion = "tag('precarga_porcentaje').style.opacity = '" + (1 - (i / 100)) + "'";
			setTimeout(accion, i * 20);
		}
		setTimeout(activar_controles, 2000);
	}
	else
		setTimeout(precargando, 100);
}

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;
}

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.

Notas finales

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.

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.

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 html de la página.

Zona de comentarios

Este apunte aún no tiene comentarios.

Evaluación

Valoración de esta página: (apunte.61) valor

Valoración evaluar evaluar evaluar evaluar evaluar evaluar evaluar evaluar evaluar evaluar

Respuesta: Zona de mensajes (proceso de evaluación)

Historial de navegación

Esta página ha sido visitada en 2491 ocasiones


Disponemos de rss sindicar

Y del Mapa del sitio, además del sitemap.xml.


Aquí podemos encontrar los apuntes más visitados.

"Top 10" reemplaza a la sección Últimos apuntes.


Una buena forma de buscar un apunte es a partir de su categoría.


También es posible buscar apuntes por medio de las etiquetas (tags).


Hemos decidido poner al alcance de todos algunos comodines.

Adjuntamos una versión reducida del "buscador interno" que vemos en la lista anterior:

Buscar en apuntes

También estamos recopilando antiguas páginas del sitio.


Desde este recuadro se puede hacer una búsqueda cronológica.


Se puede crear una postal nueva desde el enlace del sector "Otras páginas del dominio", o editar la que sale en el recuadro, pulsando sobre ella..

../diario.imagen.php?id=2&max=480
enlace a la postal
Copyright © 2002-2018 www.pepemolina.com
RSS rss | Ver Mapa del sitio