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.