JMiur [E]

Este es otro método que nos facilita la tarea de precargar imágenes utilizando sólo CSS y es útil cuando se trata de fondos, sobre todo, si estamos aplicando algún tipo de efecto rollover (más información).

¿Para qué se necesita precargarlas?

Imaginemos que tenemos un enlace con una imagen de fondo, no hay problema, al cargarse la página, esa imagen se muestra. Tardará más o menos de acuerdo a donde esté alojada, a su tamaño, a nuestra conexión pero, se mostrará. Ahora, queremos que esa imagen cambie cuando se coloca el puntero del ratón encima.

Lo que ocurrirá, entonces, es que esa segunda imagen (que aún no está en nuestra página), deberá ser cargada y por lo tanto, habrá una demora más o menos significativa lo que arruinará el efecto.

Esto, ocurrirá una sola vez ya que una vez cargada, se guardará en la caché del navegador así que la segunda vez que nos movamos, la imagen permutará inmediatamente pero, eventualmente, ni lo veremos, haremos click y estaremos en otro lado.

Entonces, siempre que se usen rollovers, lo ideal es precargar esas imágenes para que estén disponibles y la navegación del sitio sea ágil.

Lo podemos conseguir fácilmente, creando una definición de estilo que colocaremos antes de </head>:
<style type='text/css'>
#preloader {
/* la lista de imágenes a cargar */
background-image: url(URL_imagen_1);
background-image: url(URL_imagen_2);
background-image: url(URL_imagen_3);
/* y ocultaremos todo */
height: 0px;
display: inline;
margin: 0;
padding: 0;
width: 0px;
}
</style>
Por último, agregaremos un DIV al inicio de nuestra página, por ejemplo, justo después de <body>:
<div id="preloader"></div>
Como lo que está oculto se carga igual, no veremos nada pero el navegador leerá esas imágenes y las guardará en la caché y el efecto funcionará más rápidamente.


Algo similar podemos lograr si le agregamos fondos a cualquier DIV existente y los posicionamos fuera de la pantalla:
#unDIV { background: url(URL_imagen_1) no-repeat -9999px -9999px; }
#otroDIV { background: url(URL_imagen_2) no-repeat -9999px -9999px; }
Funcionará sin problemas pero, a costa de tiempo, es decir, si esas imágenes que precargamos son voluminosas, el tiempo de carga del sitio se verá afectado. Para evitar eso, podemos utilizar JavaScript y comenzar a cargar las imágenes cuando se termina de cargar la página (más información):
<script type='text/javascript'>
//<![CDATA[
function preloader() {
if (document.getElementById) {
document.getElementById("unDIV").style.background = "url(URL_imagen_1) no-repeat -9999px -9999px";
document.getElementById("otroDIV").style.background = "url(URL_imagen_2) no-repeat -9999px -9999px";
}
}
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) { oldonload(); }
func();
}
}
}
addLoadEvent(preloader);
//]]>
</script>
Otra forma, es utilizar alguno de los métodos clásicosde JavaScript (más información):
<script type='text/javascript'>
//<![CDATA[
var images = new Array();
function preload() {
for (i = 0; i < preload.arguments.length; i++) {
images[i] = new Image();
images[i].src = preload.arguments[i];
}
}
preload("URL_imagen_1", "URL_imagen_2",);
//]]>
</script>
Aunque, si se trata de efectos de rollover, lo recomandable es utilizar la técnica de los sprites que es lá única 100% efectiva.

13 comentarios:

egoloco  

La de los Sprites es en mi opinión la más efectiva, aunque aún no he aplicado ninguna. Creo que Blogger la utiliza, puede ser?

Responder
JMiur  

Blogger no sé, no me he fijado. Este blog si :D Casi toda la plantilla se basa en dos sprites.

Responder
Aurora  

Hola, excelente explicación. Hace tiempo me parece que escribiste un artículo para que los videos de Youtube tb tuvieran una carga más liviana (no retrasaran la carga del blog) pero no encuentro ese post!! (una ayuda?:) )

Responder
Graciela  

Tengo que leerlo con mucha paciencia, queda bellísimo!
Feliz viernes :P

Responder
Bichito  

El primer método, con CSS, me encantó. Aunque claro, me gustaría aprender más lo del tema de los sprites, sólo que al parecer se necesita mucha paciencia para implementarlo :-| y más cuando son muchas imágenes...
Excelente post, lo guardo entre mis marcadores ;)

Responder
Ángel  

La técnica de los sprites es realmente ingeniosa, yo la he utilizado alguna vez y funciona a las mil maravillas, además es muy simple

Responder
JMiur  

Aurora: Se me ocurre que podría ser esta entrada o esta otra. Sino, seguimos buscando :)

Graciela: Paciencia es nuestro nombre :D

Bichito: Es lo ideal, sin duda.

Ángel: Si, es simple aunque depende mucho de la cantidad de imágenes que querramos poner. Vale la pena intentarlo.

Responder
Aurora  

Es el de "Cómo Insertar vídeos sin insertar videos". :) Ay, no era tan difícil... Aunque claro, eso lo digo ahora viendo aquel artículo.
Muchas gracias.

Responder
JMiur  

Suerte, Aurora :)

Responder
ENSASKE  

Me gustan las 3 soluciones, siempre he usado la del css, no conocia el de javascript hasta que continué con el proyecto de un amigo, y siempre tenia problemas, el de sprites siempre quice saber como se hacían, gracias por eso!

JMiur  

A mi juicio, el mejor método es el uso de sprites aunque todo depende de las situaciones individuales ya que no existen nada universal.

Responder
Jose Salvador Lopez Camacho  

Hola, buen día, antes que nada me gustaría comentar que me gusta mucho tu blog y siento que hacen un excelente trabajo. Pasando a la parte de las cuestiones, quisiera saber si, ¿es más recomendable tomar las rutas como absolutas o relativas?.

¡Saludos!

JMiur  

Si se trata de Blogger sólo puedes usar direcciones absolutas.

Si se trata de un servidor propio, es un tema de gustos personales o de la estructura que tengas armada.

Embas formas tendrán el mismo resultado en cuanto a performance.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR