Que tal amigos lectores, en este post hablaremos acerca de como hacer una precarga de imágenes utilizando Javascript, muchas veces tenemos un sitio WEB que contiene un alto contenido de imágenes, como por ejemplo, un álbum de fotos, esto hace que la carga de la página sea un poco lenta lo cual dificulta la navegación del mismo. En muchas ocasiones, cuando se da clic para ver la siguiente imagen, esta demora en cargar debido a que el navegador debe realizar esta nueva solicitud al servidor y como consecuencia perdemos el interés de ver el contenido restante.
Una técnica que se puede utilizar para agilizar este proceso de carga, es precargar las imágenes mediante Javascript, lo cual implica realizar solicitudes al servidor en un proceso invisible al usuario para que estas imágenes se almacenen en el cache del navegador y así cuando damos clic para ver la siguiente imagen, esta aparezca casi de manera instantánea
El objeto a utilizar es el objeto
El siguiente es un ejemplo sencillo de esta funcionalidad
<script type="text/javascript"> var img = new Image(); img.src = 'images/logo.png'; </script>
Podemos definir una función en Javascript que acepte como parámetro un arreglo con las imágenes que se desean precargar
<script type="text/javascript">
function preloadImage(data)
{
var base_path = 'images/';
var total = data.length;
var i = 0;
var imgArray = new Array();
for(i=0; i<total; i++)
{
var tmpImage = new Image();
tmpImage.src = base_path + data[i];
imgArray.push(tmpImage);
}
}
</script>Ejemplo que une todas las piezas
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Preload Image</title>
<script type="text/javascript">
var imageData = [
//Example Images
'image1.jpg','image2.png','image3.png',
'image4.jpg','image5.png','image6.png',
'image7.jpg','image8.png','image9.png'
];
function preloadImage(data)
{
var base_path = 'images/';
var total = data.length;
var i = 0;
var imgArray = new Array();
for(i=0; i<total; i++)
{
var tmpImage = new Image();
tmpImage.src = base_path + data[i];
imgArray.push(tmpImage);
}
}
</script>
</head>
<body onload="preloadImage(imageData);">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="images/image1.jpg" /></td>
<td><img src="images/image2.jpg" /></td>
<td><img src="images/image3.jpg" /></td>
</tr>
<tr>
<td><img src="images/image4.jpg" /></td>
<td><img src="images/image5.jpg" /></td>
<td><img src="images/image6.jpg" /></td>
</tr>
<tr>
<td><img src="images/image7.jpg" /></td>
<td><img src="images/image8.jpg" /></td>
<td><img src="images/image9.jpg" /></td>
</tr>
</table>
</body>
</html>Espero este post les sirva de ayuda en algún futuro proyecto, no olvides en dejar tus comentarios.
3 comentarios
Buen dia, tengo un problema con una pagina que ando creando para una empresa, en la pagina de inicio tengo un cover el cual tiene imagenes background y tienen animacion de transicion para pasar de imagen a imagen, en total 5 imagenes, el problema que tengo es que la primera ves que entras a la pagina, cuando la pagina hace la transicion de imagenes hace un pequeño parpadeo blanco como de menos del segundo y cambia a otra imagen, pensaba que una solucion seria cargarlas primero en la cache, pero como hago esto si las imagenes que tengo las utilizo en el css en forma de background o si me ayudarian con una solucion, les dejo la pagina en la seccion de web del formulario para que lo chequen
Hola Emilio,
Estuve revisando el sitio y si deseas crear un slideshow usando background images con CSS, recomiendo tener varios contenedores, cada uno con su respectiva imagen y apliques los efectos de transición a cada uno de ellos, parte del problema es que estas cambiando el background image al mismo elemento, por ende, en algún momento este elemento queda sin imagen que mostrar.
Otro consejo es reducir el tamaño de las imágenes, aunque sea a la mitad, esto tendrá un impacto positivo en la carga del sitio.
Te dejo este enlace de referencia donde usan background CSS para crear el slideshow https://tympanus.net/Tutorials/CSS3FullscreenSlideshow/ y el tutorial https://tympanus.net/codrops/2012/01/02/fullscreen-background-image-slideshow-with-css3/
Espero sirvan de guía, saludos.