Imagen de precarga de JavaScript

Este tutorial enseña cómo precargar imágenes con JavaScript.

Antes de hablar sobre cómo precargar imágenes, primero comprendamos por qué necesitamos precargar imágenes. Cuando definimos una imagen usando la etiqueta <image> en HTML, el navegador ve esa imagen, la descarga y la almacena en caché antes de que se cargue la página. Hace que la visualización de imágenes sea bastante sencilla. Pero cuando tenemos una carga dinámica de imágenes activada por código JavaScript, el navegador no tiene información previa al respecto. Por lo tanto, estas imágenes no se pueden descargar ni almacenar en caché. Estas imágenes se cargarán sobre la marcha y provocarán un retraso en la visualización cuando la imagen se descargue primero. Hace que un sitio web se vea muy mal y, por lo tanto, estas imágenes deben estar precargadas.

Por ejemplo: si queremos mostrar un efecto de rollover, es decir, cambiar la imagen que se muestra cuando pasamos el mouse sobre ella, debemos asegurarnos de que la segunda imagen esté precargada; de lo contrario, la imagen tardará mucho en cargarse, lo que hace que el sitio web parezca feo y no responda.

Precargar imágenes con JavaScript

Procedimiento

Código

var preloaded = 0;
var images = new Array("img1.jpg", "img2.jpg", "img3.jpg");
 
function preLoader(e) {
    for (var i = 0; i < images.length; i++) {
        var tempImage = new Image();
         
        tempImage.addEventListener("load", progress, true);
        tempImage.src = imageArray[i];
    }
}
 
function progress() {
    preloaded++;
     
    if (preloaded == imageArray.length) {
        //ALL Images have been loaded, perform the desired action
    }
}
this.addEventListener("DOMContentLoaded", preLoader, true);