javascript - ウェブサイトのダウンロード画像の進捗状況を確認しますか？

Question

画像のダウンロードがどこまで進んだか知りたいです。

スプライトされた大きな画像があり、その画像のダウンロードがどのように行われるかを確認したいのですが、それも可能ですか？

Answer 1

jQueryプラグインを使用するメソッドがここですでに説明されています。

'Content-Length'応答ヘッダーに基づく実装もありますが、IEのXHRオブジェクトはreadyState 3を実装していないため、IEでは機能しません。

最後のアプローチは、基本的にXHRオブジェクトをポーリングし、その長さとダウンロード済みの応答を尋ねることで構成されます。画像のダウンロードを使用するように適応することもできますが、これもブラウザに対応していません。

var myTrigger;
var progressElem = $('#progressCounter');

$.ajax ({
    beforeSend: function (thisXHR)
    {
            myTrigger = setInterval (function ()
            {
                    if (thisXHR.readyState > 2)
                    {
                            var totalBytes  = thisXHR.getResponseHeader('Content-length');
                            var dlBytes     = thisXHR.responseText.length;
                            (totalBytes > 0)? progressElem.html (Math.round ((dlBytes/totalBytes) * 100) +"%"):progressElem.html (Math.round (dlBytes /1024) + "K");
                    }
            }, 200);
    },

});

お役に立てば幸いです。乾杯