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.
No, no es que me haya dado un ataque de mal gusto o que de pronto, haya saltado en un agujero negro que me ha llevado a otros tiempos ... no tan atrás en realidad, sólo hace unos pocos años, el top de los tops era el ya difunto 
Pero, aunque GeoCities ya no está disponible, la gente de 
Los resultados variarán pero siempre, siempre, serán espantossos; eso, es algo que está garantizado.
