Imagen de precarga de JavaScript

Harshit Jindal 20 noviembre 2021
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

  • Iniciar una variable preloaded para almacenar el número de imágenes cargadas durante la fase de precarga y un array de imágenes images para almacenar la dirección de todas las imágenes a precargar.
  • Definimos una función preLoader() para crear objetos de imagen para todas las imágenes que tienen que ser precargadas y almacenar la propiedad src en el objeto del array images. También adjuntamos una función progress() para mantener el recuento de imágenes precargadas correctamente y realizar cualquier acción después de que se hayan precargado todas las imágenes.
  • Agregamos un detector de eventos a las ventanas que llaman a nuestro preLoader() cuando se carga el contenido DOM.

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);
Harshit Jindal avatar Harshit Jindal avatar

Harshit Jindal has done his Bachelors in Computer Science Engineering(2021) from DTU. He has always been a problem solver and now turned that into his profession. Currently working at M365 Cloud Security team(Torus) on Cloud Security Services and Datacenter Buildout Automation.

LinkedIn

Artículo relacionado - JavaScript Image