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>:
¿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.
0 comentarios:
Publicar un comentario