Image de préchargement JavaScript

Ce tutoriel explique comment précharger des images avec JavaScript.

Avant de parler de la façon de précharger des images, comprenons d’abord pourquoi nous devons précharger des images. Lorsque nous définissons une image à l’aide de la balise <image> en HTML, le navigateur voit cette image, la télécharge et la met en cache pour nous avant le chargement de la page. Cela rend l’affichage des images assez simple. Mais lorsque nous avons un chargement dynamique d’images déclenché par du code JavaScript, le navigateur n’a aucune information préalable à ce sujet. Ainsi, ces images ne peuvent pas être téléchargées et mises en cache. Ces images seront chargées à la volée et entraîneront un retard dans l’affichage lors du téléchargement de l’image en premier. Cela donne une très mauvaise apparence à un site Web, et par conséquent, ces images doivent être préchargées.

Par exemple : si nous voulons afficher un effet de survol, c’est-à-dire modifier l’image affichée lorsque nous survolons la souris, nous devons nous assurer que la deuxième image est préchargée ; sinon, l’image prendra beaucoup de temps à charger, ce qui rend le site Web moche et ne répond pas.

Précharger les images avec JavaScript

Procédure

Code

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);