Cómo precargar imágenes con jQuery

En este post explicaré cómo precargar imágenes con jQuery para poder mejorar la experiencia del usuario de vuestra página. Cuando queremos cambiar una imagen por otra (en CSS) cuando sucede un evento, pasarle el ratón por encima, el navegador tiene que descargar la nueva imagen que puede dar un retraso dando un salto un tanto desagradable. Sin embargo, esto normalmente pasa la primera la vez, una vez que la imagen este cargada no pasa pero, como las primeras impresiones cuentan, podemos precargar las imágenes con jQuery para solucionar ese fallo.

Al indicar que precargamos una imagen, el navegador es forzado a descargar la imagen antes de mostrarla (lógico no?). Una vez descargada la imagen, se almacena en el cache del navegador para futuras peticiones evitando que el usuario tenga que descargarla por segunda vez al servidor web.Precargar una imagen es tan fácil como crear un objeto imagen y estableciéndole el atributo src con la ruta de la imagen que queremos precargar.

<script>
   var objFoto = new Image();
   objFoto.src = 'iagenes/mesa-madera.jpg'
</script>

var objFoto = new Image();

objFoto.src = 'iagenes/mesa-madera.jpg'

</script>

Este código precarga la imagen antes de que necesites remplazar una imagen en la página. Sin embargo, esto es código JavaScript (también aplicable a jQuery).

Precargar varias imágenes método JavaScript

Una manera de precargar imágenes es creando un array al principio de la página donde contiene las rutas de todas las fotos que quieres precargar, luego recorres el array en un un bucle creando un objeto imagen en cada iteración

var imagenesCargadas = ['mesa-madera.jpg', 'mesa-madera-gris.jpg'];

for (var i=0; I < imagenesCargadas.length; i++) { 
  new Image().src = imagenesCargadas[i]; 
}

var imagenesCargadas = ['mesa-madera.jpg', 'mesa-madera-gris.jpg'];

for (var i=0; I < imagenesCargadas.length; i++) {

new Image().src = imagenesCargadas[i];

}

Precargar imágenes con jQuery

En jQuery funciona igual sólo que en vez de crear un objeto imagen, creamos un <img>.

var imagenesCargadas = ['mesa-madera.jpg', 'mesa-madera-gris.jpg']; 

for (var i=0; i < imagenesCargadas.length; i++) { 
  $('<img>').attr('src',imagenesCargadas[i]); 
}

var imagenesCargadas = ['mesa-madera.jpg', 'mesa-madera-gris.jpg'];

for (var i=0; i < imagenesCargadas.length; i++) {

$('<img>').attr('src',imagenesCargadas[i]);

}

Al incluir la etiqueta <img>, estamos creando un elemento HTML. Y con cada imagen creada, le asignamos la ruta de la imagen que queremos cargar con el método attr(). De esta manera estamos forzando al navegador a descargar una imagen y precargarla.

Cómo precargar imágenes (caso práctico)

Vamos hacer que al pasar el ratón por encima de una imagen, esta cambie por otra. Para este caso te recomiendo saber los eventos de ratón. En esta caso, vamos a usar el evento hover(), que abarca tanto el evento mouseover como mouseout (La imagen utilizada es de tirachard / Freepik) . Si vas a usar la misma imagen que yo, te recomiendo que cambies el tamaño de esta ya que es muy pesada y puede producir un retraso al hacer el hover().

Este código iría entre <script> en el <head> de la página

$(document).ready(function() { 
	 var nuevaFoto = new Image(); 
	 nuevaFoto.src = 'mesa-madera-gris.jpg'; 
	
	 var viejaFoto= $('#imagen').attr('src'); 
	
	
	$('#imagen').hover( 
		function() { 
			 $(this).attr('src', nuevaFoto.src); 
		}, 
		function() { 
			 $(this).attr('src', viejaFoto); 
	}); // end hover 
}); // end ready

$(document).ready(function() {

var nuevaFoto = new Image();

nuevaFoto.src = 'mesa-madera-gris.jpg';

var viejaFoto= $('#imagen').attr('src');

$('#imagen').hover(

function() {

$(this).attr('src', nuevaFoto.src);

function() {

$(this).attr('src', viejaFoto);

}); // end hover

}); // end ready

La función hover() acepta 2 argumentos: El primero es la función anónima que indica al navegador qué hacer cuando el ratón pasa por la imagen; el segundo es una función que indica qué hacer cuando el ratón se va de la imagen. También se emplea la variable viejaFoto que permite mantener la ruta de la imagen original para volver a ponerla cuando el ratón no este sobre la imagen.

precargar imágenes con jQuery - Resultado

Resultado final

Y hasta aquí cómo precargar imágenes con jQuery, espero que os haya gustado. A seguir picando 🙂