Wie jQuery die Funktion zum Vorladen von Bildern implementiert

Ich habe kürzlich JavaScript verwendet, um eine Animationsfunktion zu erstellen, um sicherzustellen, dass die Animation reibungslos und reibungslos abgespielt werden kann. Lassen Sie mich den Prozess der Implementierung dieser Funktion mit Ihnen teilen

Einzelbild-Vorabladen

Die derzeit gebräuchlichste Implementierungsmethode ist wie folgt

function preloadImg(url) {
    var img = new Image();
    img.src = url;
    if(img.complete) {
        //接下来可以使用图片了
        //do something here
    }
    else {
        img.onload = function() {
            //接下来可以使用图片了
            //do something here
        };
    }
}

Instanziieren Sie zuerst ein Bildobjekt. Zuweisen Setzen Sie den Wert auf img, setzen Sie dann img.src auf die durch die Parameter-URL angegebene Bildadresse und bestimmen Sie dann das vollständige Attribut von img. Wenn für dieses Bild ein lokaler Cache vorhanden ist, ist der Wert wahr Wenn kein lokaler Cache vorhanden ist, ist der Wert falsch. Zu diesem Zeitpunkt müssen wir das Onload-Ereignis von img überwachen und den Vorgang in der Onload-Callback-Funktion ausführen kompatibel mit allen aktuellen Browsern

Vorladen mehrerer Bilder

In vielen Szenarien kann das Vorladen einzelner Bilder unsere Anforderungen nicht erfüllen, da Funktionen wie Animation normalerweise viele davon haben Als nächstes werden wir unsere Funktion basierend auf dem ursprünglichen Einzelbild-Vorladen verbessern

function preloadImg(list) {
    var imgs = arguments[1] || [],    //用于存储预加载好的图片资源
        fn = arguments.cal    lee;
    if(list.length == 0) {
        return imgs;
    }
    var img = new Image();
    img.src = list[0];
    if(img.complete) {
        imgs.push(img);
        list.shift();
        fn(list, imgs);
    }
    else {
        img.onload = function() {
            imgs.push(img);
            list.shift();
            fn(list, imgs);
        };
    }
}
var list = [......],    //此处省略一万个字符
    imgs = preloadImg();

Da bei der Frame-Animation möglicherweise die Reihenfolge der in jedem Frame der Animation verwendeten Bilder sichergestellt werden muss, verwende ich in diesem Code die Rekursion Bei dieser Methode wird das nächste Bild geladen, nachdem das vorherige geladen wurde. Die Bildressource wird im imgs-Array gespeichert und die Adresse dieses Bildes wird aus der Adressarray-Liste entfernt Springen Sie in der Liste aus der Rekursion und geben Sie das imgs-Array zurück

Die Idee ist schön, die Realität ist grausam, dieser Code hat zwei unerträgliche Probleme

Zuallererst bin ich sehr wahrscheinlich Das zuletzt zurückgegebene imgs-Array kann nicht abgerufen werden, da der Speichervorgang von imgs im Onload-Callback-Ereignis platziert wird, solange Bilder vorhanden sind, die nicht lokal zwischengespeichert sind. Die Ereignisüberwachung ist auch eine Art asynchroner Vorgang in JavaScript Nach der Bindung Das Onload-Ereignis Nach der Rückruffunktion endet die PreloadImg-Funktion ohne Rückgabewert. Der von der externen Imgs-Variablen empfangene Wert ist nur dann undefiniert, wenn alle Bilder über einen lokalen Cache verfügen Array von Bildressourcen

lädt ein Bild, bevor das nächste geladen wird. Der gesamte Vorgang des Vorladens von Bildern dauert relativ lange, die Benutzererfahrung wird beeinträchtigt und der ursprüngliche asynchrone Vorgang ist spezifisch. Diese Implementierungsmethode entspricht dem vollständigen Verzicht auf die asynchrone Onload-Funktion

Mehrfaches Bild-Vorladen (verbesserte Version)

Dieses Mal fügen wir direkt eins hinzu. Ein leeres Array wird an übergeben Funktion als Parameter, und alle Bilder werden in diesem Array gespeichert. Das Folgende ist der verbesserte Funktionscode (vorausgesetzt, wir können jQuery verwenden).

function preloadImg(list,imgs) {
    var def = $.Deferred(),
        len = list.length;
    $(list).each(function(i,e) {
        var img = new Image();
        img.src = e;
        if(img.complete) {
            imgs[i] = img;
            len--;
            if(len == 0) {
                def.resolve();
            }
        }
        else {
            img.onload = (function(j) {
                return function() {
                    imgs[j] = img
                    len--;
                    if(len == 0) {
                        def.resolve();
                    }
                };
            })(i);
            img.onerror = function() {
                len--;
                console.log('fail to load image');
            };
        }
    });
    return def.promise();
}
var list = [......],    //此处省略一万个字符
    imgs = [];
$.when(preloadImg(list, imgs)).done(
    function() {
        //预加载结束
        //do something here
    }
);

Wenn die Onload-Rückruffunktion separat an jedes Bild gebunden wird, wird die Abschlussmethode verwendet Um die aktuelle inkrementelle Variable i zu speichern, werden die Bilder in der Listenadresse, die nicht lokal zwischengespeichert sind, jedes Mal im letzten Element von imgs gespeichert Dieses Mal entfernen wir die Adresse des Bildes nicht aus dem Listenarray, sodass wir

in diesem Code erfolgreich abrufen können, wenn wir die Daten des Listenarrays später verwenden müssen Das verzögerte Objekt von jQuery, das es mir erleichtert, den gesamten Prozess des Vorladens von Bildern zu verstehen

Das obige ist der detaillierte Inhalt vonWie jQuery die Funktion zum Vorladen von Bildern implementiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!