javascript - See progress of downloaded images of website?

Question

I want to see how far the download of an image has come.

I have a big image that is sprited, and I want to see how the download of that image goes, is that even possible?

Answer 1

这里已经讨论过一种使用 jQuery 插件的方法。

还有一个基于 'Content-Length' 响应头的实现，但它不适用于 IE，因为 IE 的 XHR 对象没有实现 readyState 3。

最后一种方法主要包括轮询 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);
    },

});

我希望它有所帮助。干杯