Blog
Blog sobre programación y diseño en la web
Cómo pre-cargar imágenes con jQuery
Translate this page into EnglishHay veces que utilizamos imágenes con javascript (por ejemplo una galería de imágenes) y queremos que se carguen antes de que vayan a ser utilizadas para evitar que luego se perciba el feo efecto de esperar a que la imagen cargue. En la página de inicio de la web de Emenia al situar el cursor del ratón sobre las opciones del menú cambia la imagen de fondo. Para que aparezca la imagen sin esperas utilicé este código:
1 2 3 4 5 6 7 | jQuery.preloadImages = function(){ for(var i = 0; i<arguments.length; i++){ jQuery("<img>").attr("src", arguments[i]); } } // Para utilizar el script y cargar tus imágenes: $.preloadImages("images/logo.png", "images/logo-face.png", "images/mission.png"); |
Es aconsejable que lo situéis al final del código, justo antes de cerrar body para que no se demore la carga de toda la página.
Como es lógico necesitamos haber cargado antes jQuery:
1 | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2"></script> |
Si estamos en Wordpress jQuery viene ya incorporado. Sí hay que tener en cuenta que jQuery se inserta donde se encuentre wp_head(), dentro de head.php.
Fuente: Trip Magazine, More jQuery and General Javascript Tips to Improve Your Code
Escribir un comentario
XHTML: Puedes usar estos códigos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">
