JavaScript introduit la méthode de chargement AJAX d'une seule image pour afficher la progression

Recommandation d'apprentissage gratuite : Tutoriel vidéo js

Utiliser votre téléphone portable pour surfer sur Internet, je vois souvent des barres de progression de chargement, notamment lors du chargement d'images.

Nous avons effectué la progression du chargement de plusieurs images, mais pour une seule image, surtout lorsque l'image est relativement grande, une barre de progression est nécessaire pour indiquer à l'utilisateur la progression du chargement, et cela peut améliorer l'expérience utilisateur. .

Le chargement traditionnel ne fonctionnera certainement pas. Le chargement AJAX est requis. Le chargement AJAX a un événement de progression spécial .

La démo spécifique est la suivante. Atteignez l'objectif :

Chargez une image et affichez la progression du pourcentage de chargement une fois le chargement terminé, affichez l'image.

Structure HTML :

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

Ce qui doit être expliqué ici est :

req.responseType = "blob";

Définir les données de la demande tapez en type blob. Binary Large Object est un objet binaire plus grand qui peut être utilisé pour charger des données non textuelles. Cette démo charge une image.

Par conséquent, lors de l'acceptation des données de retour, ce n'est pas une réponseText .

window.URL.createObjectURL(blob) générera le chemin URL de l'objet en fonction de l'objet blob. De cette façon, vous pouvez voir les ressources (images, vidéos, audios, etc.) représentées par le blob dans le navigateur

Recommandations d'apprentissage gratuites associées : javascript (Vidéo)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!