Muchas veces nuestros sitios web tienen imágenes que necesitamos precargar, un claro ejemplo en el que resulta útil hacer esto es cuando nuestro sitio tiene efectos de “rollover” sobre las imágenes. Resulta bastante molesto cuando pasamos el mouse sobre una imágen y ésta queda en blanco hasta que termina de descargarse la imágen que debería verse al hacer rollover. Y cuando hablamos de rollover no sólo nos referimos a efectos realizados utilizando funciones en javascript, tambien se incluye, por ejemplo, cuando cambiamos el “background” de algo, en su estado hover

a.linkConRollover:hover {
background-image: url(imagen-over.jpg);
}

En este caso, sería bueno precargar la imagen “imagen-over.jpg” para que al pasar el mouse por primera vez sobre un  hipervínculo con estilo “linkConRollover” no debamos esperar a que se cargue dicha imagen.  Para eso podemos usar una función muy muy muy sencilla:

jQuery.precargarImg = function() {
for(var i=0; i
jQuery("").attr("src", arguments[i]);
}

El código completo a incluir en nuestra etiqueta head sería:


<script src="jquery.min.js" language="javascript"></script>
<script>
jQuery.preloadImages = function() {
for(var i = 0; i<arguments.length; i++){
jQuery("<img>").attr("src", arguments[i]);
}
$.preloadImages("pics/pic1.jpg","pics/pic2.jpg","pics/pic3.jpg");
</script>


Be Sociable, Share!

• 

Guardado en : Iugo, Javascript, jQuery por gonzalo