JavaScript precaricato immagine

Questo tutorial insegna come precaricare le immagini con JavaScript.

Prima di parlare di come precaricare le immagini, capiamo innanzitutto perché abbiamo bisogno di precaricare le immagini. Quando definiamo un’immagine utilizzando il tag <image> in HTML, il browser vede quell’immagine, la scarica e la memorizza nella cache per noi prima che la pagina venga caricata. Rende la visualizzazione delle immagini abbastanza semplice. Ma quando abbiamo un caricamento dinamico di immagini attivato dal codice JavaScript, il browser non ha informazioni precedenti al riguardo. Pertanto, tali immagini non possono essere scaricate e memorizzate nella cache. Queste immagini verranno caricate al volo e causerebbero un ritardo nella visualizzazione quando l’immagine viene scaricata per prima. Rende pessimo un sito web, e quindi queste immagini devono essere precaricate.

Ad esempio: se vogliamo mostrare un effetto rollover, cioè cambiare l’immagine visualizzata quando ci passiamo sopra il mouse, dobbiamo assicurarci che la seconda immagine sia precaricata; in caso contrario, il caricamento dell’immagine impiegherà molto tempo, il che rende il sito Web brutto e non rispondente.

Precarica le immagini con JavaScript

Procedura

Codice

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