javascript - 查看网站图片下载进度？

Question

我想看看图片的下载进度。

我有一个 sprite 的大图像，我想看看该图像的下载情况如何，这可能吗？

Answer 1

有一种方法已经讨论过here它使用 jQuery 插件。

有 also a implementation基于“Content-Length”响应 header ，但它不适用于 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);
    },

});

希望对您有所帮助。干杯