JavaScript-Preload-Bild

In diesem Tutorial erfahren Sie, wie Sie Bilder mit JavaScript vorab laden.

Bevor wir darüber sprechen, wie Bilder vorab geladen werden, wollen wir zunächst verstehen, warum wir Bilder vorab laden müssen. Wenn wir ein Bild mit dem <image>-Tag in HTML definieren, sieht der Browser dieses Bild, lädt es herunter und speichert es für uns zwischen, bevor die Seite geladen wird. Es macht die Anzeige von Bildern ziemlich einfach. Aber wenn wir dynamisches Laden von Bildern haben, das durch JavaScript-Code ausgelöst wird, hat der Browser keine vorherigen Informationen darüber. Daher können solche Bilder nicht heruntergeladen und zwischengespeichert werden. Diese Bilder werden im laufenden Betrieb geladen und würden eine Verzögerung bei der Anzeige verursachen, wenn das Bild zuerst heruntergeladen wird. Es lässt eine Website sehr schlecht aussehen, und daher müssen diese Bilder vorgeladen werden.

Zum Beispiel: Wenn wir einen Rollover-Effekt zeigen wollen, d.h. das angezeigte Bild ändern möchten, wenn wir mit der Maus darüber fahren, müssen wir sicherstellen, dass das zweite Bild vorgeladen ist; Andernfalls dauert das Laden des Bildes sehr lange, wodurch die Website hässlich und nicht mehr reagiert.

Bilder mit JavaScript vorladen

Verfahren

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