JavaScript führt die Methode AJAX ein, ein einzelnes Bild zu laden, um den Fortschritt anzuzeigen

Empfohlenes kostenloses Lernen: js-Video-Tutorial

Beim Surfen im Internet auf Mobiltelefonen sehe ich oft Ladefortschrittsbalken, insbesondere beim Laden von Bildern.

Wir haben den Ladefortschritt mehrerer Bilder überprüft, aber für ein einzelnes Bild, insbesondere wenn das Bild relativ groß ist, ist ein Fortschrittsbalken erforderlich, um dem Benutzer den Ladefortschritt mitzuteilen, was die Benutzererfahrung verbessern kann.

Herkömmliches Laden wird definitiv nicht funktionieren. AJAX-Laden ist ein spezielles progress-Ereignisfortschritt.

Die spezifische Demo ist wie folgt. Erreichen Sie das Ziel:

Laden Sie ein Bild und zeigen Sie den prozentualen Ladefortschritt an. Zeigen Sie das Bild nach Abschluss des Ladevorgangs an.

HTML-Struktur:

<p id="pro">
    0%
</p>
<p id="box">
    内容加载中。。。
</p>

JavaScript:

let box = document.getElementById("box");
let pro = document.getElementById("pro");
let req = new XMLHttpRequest();
req.open("get","images/1.png" , true);
req.responseType = "blob";   // 加载二进制数据
req.send();

req.addEventListener("progress",function(oEvent){
    if (oEvent.lengthComputable) {
        var percentComplete = oEvent.loaded / oEvent.total * 100;
        pro.innerHTML = percentComplete + "%" ;
    } else {
        // 总大小未知时不能计算进程信息
    }
});
// 加载完毕
req.addEventListener("load",function(oEvent){
    let blob = req.response;    //  不是 responseText
    pro.innerHTML = "图片加载完毕";
    box.innerHTML = `<img src = ${window.URL.createObjectURL(blob)} >`;
});

Was hier erklärt werden muss, ist:

req.responseType = "blob";

Setzen Sie den Anforderungsdatentyp auf den Blob-Typ. Binary Large Object ist ein größeres Binärobjekt, das zum Laden von Nicht-Text-Daten verwendet werden kann. Diese Demo lädt ein Bild.

Daher handelt es sich beim Akzeptieren von Rückgabedaten nicht um Antworttext.

window.URL.createObjectURL(blob) generiert den URL-Pfad des Objekts basierend auf dem Blob-Objekt. Auf diese Weise können Sie die durch den Blob dargestellten Ressourcen (Bilder, Videos, Audios usw.) im Browser sehen

Das obige ist der detaillierte Inhalt vonJavaScript führt die Methode AJAX ein, ein einzelnes Bild zu laden, um den Fortschritt anzuzeigen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!