Javascript源文件下载进度?

时间:2012-06-29 16:57:12

标签: javascript jquery

我正在寻找一个大的映射/小部件javascript文件(1.3 MB),并希望在加载时显示进度条。我知道firebug的网表标签知道很多这方面的信息,但我想要更轻量级的东西。我遇到过这个网站: http://blog.greweb.fr/2012/04/work-in-progress/

几乎让我在那里,除了我需要获取我正在下载的文件。当文件下载时,我没有在jQuery的getScript上看到任何监听器。有谁知道如何获得源文件下载的进度?

提前致谢!

1 个答案:

答案 0 :(得分:8)

如果你使用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
    }
});

这设置一个间隔,通过获取加载的字节和总字节来计算进度。这可能适合你。