Cómo pre-cargar imágenes con jQuery
Hay 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
Sigue a Juan en Twitter, en Google+, o suscríbete al RSS Feed de Emenia para estar al día de nuestros artículos.
Artículos relacionados
Últimos artículos
Suscribirse a las entradas
Suscribirse a nuestro boletín
