JavaScript では、AJAX で 1 つの画像をロードして進行状況を表示するメソッドが導入されています。

無料学習の推奨事項: js ビデオ チュートリアル

インターネットを使用する携帯電話では、特に画像を読み込むときに、読み込みの進行状況バーがよく表示されます。

複数の画像の読み込みの進行状況を確認しましたが、単一の画像の場合、特に画像が比較的大きい場合は、読み込みの進行状況をユーザーに知らせるために進行状況バーが必要であり、ユーザー エクスペリエンスを向上させることができます。 。

従来の読み込みは確実に機能しません。AJAX 読み込みが必要です。AJAX 読み込みには、特別な 進行状況イベント progress があります。

具体的なデモは以下の通りです。目標を達成します:

画像をロードし、ロードの進行状況の割合を表示します。ロードが完了したら、画像を表示します。

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

ここで説明する必要があるのは:

req.responseType = "blob";

リクエスト データを設定するタイプからブロブタイプへ。バイナリ ラージ オブジェクトは、非テキスト データのロードに使用できる、より大きなバイナリ オブジェクトです。このデモでは画像を読み込みます。

したがって、返されたデータを受け入れるときは、responseText ではありません。

window.URL.createObjectURL(blob) は、BLOB オブジェクトに基づいてオブジェクトの URL パスを生成します。このようにして、BLOB によって表されるリソース (画像、ビデオ、オーディオなど) をブラウザーで確認できます。

#関連する無料学習の推奨事項: javascript (ビデオ)

以上がJavaScript では、AJAX で 1 つの画像をロードして進行状況を表示するメソッドが導入されています。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。