Precarga de Imágenes con Javascript

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn

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 Image de Javascript, luego en el atributo src definimos cual es la ruta que se debe precargar.

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.

Entradas relacionadas
Seguridad

Clickbaits

Los clickbaits tienen como propósito atraer la mayor cantidad de visitas posible a alguna página web y en muchos casos, exponen riesgos de seguridad al usuario.

Leer Más >>
WordPress Linting Hero Image
Tips

WordPress Linting

El uso de linting nos ayuda a mantener el estándar en nuestro código fuente, forzando al programador o grupo de programadores a seguir ciertas reglas preestablecidas, unificando de esta manera la legibilidad del mismo.

Leer Más >>
ES6
WEB

Promesas ES6

Las promesas son objetos que retornan un valor en el futuro. Debido a la manera asíncrona que funciona JavaScript, se pueden seguir ejecutando el código sin necesidad de esperar que otro proceso termine.

Leer Más >>

2 respuestas

  1. 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

    1. 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.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *