Javascript源文件下载进度？答案

【问题标题】：Javascript source file download progress?Javascript源文件下载进度？
【发布时间】：2012-06-29 16:57:12
【问题描述】：

我正在采购一个大型映射/小部件 javascript 文件 (1.3 MB)，并希望在加载时显示一个进度条。我知道萤火虫的网络观察标签知道很多这些信息，但我想要更轻量级的东西。我偶然发现了这个网站： http://blog.greweb.fr/2012/04/work-in-progress/

这几乎可以让我到达那里，除了我需要获取我正在下载的文件。当文件下载时，我没有在 jQuery 的 getScript 上看到任何侦听器。有谁知道如何获取源文件下载的进度？

提前致谢！

【问题讨论】：

标签： javascript jquery

【解决方案1】：

如果您使用getScript()，您可以使用成功回调执行一个函数，但这仅在脚本完成加载时。

我建议使用加载指示器图像（您可以在 http://ajaxload.info/ 找到很多）并在脚本加载后将其隐藏。

This SO 有一些其他的想法。一种解决方案如下：

var myTrigger;
var progressElem = $('#progressCounter');
$.ajax ({
    type            : 'GET',
    dataType        : 'xml',
    url             : 'somexmlscript.php' ,
    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);
    },
    complete        : function ()
    {
        clearInterval (myTrigger);
    },
    success         : function (response)
    {
        // Process XML
    }
});

这设置了一个时间间隔，通过获取加载的字节数和总字节数来计算进度。这可能对你有用。

【讨论】：

谢谢@sachleen，这就是我目前正在做的事情，我希望能做一些更像萤火虫所做的事情。
我认为这对我有用，非常感谢！我喜欢 myTrigger 的工作方式。