Question

我使用$ .getScript（url）加载外部js。现在，直到加载js，我想要显示百分比加载器（显示加载了多少js）。我该怎么做。

$(document).on('click', 'div#play', function(){
        $(this).hide();
        $('div#stop').css('display', 'block');
        $('div#processing_load').show();
        var url = 'https://www.gstatic.com/swiffy/v5.4/runtime.js';
        $.getScript(url)
            .done(function(){
                $('div#processing_load').hide();
                $('#swiffycontainer').css('display', 'block');
                $('.landing-banner').css('display', 'none');

                stage = new swiffy.Stage(document.getElementById('swiffycontainer'), swiffyobject);
                stage.start();
                stage.setBackground(null); 
            })
    })

这里我想在完成百分比之前显示加载程序。谢谢提前。欢迎任何帮助/建议。

Answer 1

我认为你不能完全做到（按进度条显示）为什么？因为我们不知道装载完成的时间。

但您可以使用一些提示来显示进度条：您需要知道文件大小并可以计算互联网速度。

time to load  = your file size / your internet speed ;
  => show progress bar when you begin to load .

计算你可以基于的速度

连接类型（2G，3G，WiFi，有线）=＆gt;得到它的速度
在加载时计算速度连接。您可以在http://stackoverflow.com/questions/4583395/calculate-speed-using-javascript
使用Navigation Timing API：window.performance。*

最后，现在正好用进度条显示（这取决于网络）。

Answer 2

使用更强大的ajax（）代替getScript（）。它还允许您解析xhr数据以设置加载状态，我编辑了您的代码（未经测试）：

$.ajax({
    xhr: function () {
        var xhr = new window.XMLHttpRequest();
        xhr.addEventListener("progress", function (evt) {
        //check if the length of the requested file is computable (if you generate the requested file using php, you require ob_start(); and ob_end_flush();)
            if (evt.lengthComputable) {
                //Calculate the percentage completed
                var percentComplete = Math.floor((evt.loaded / evt.total) * 100) + '%';
                //Do something with download progress
                $('div#processing_load').show().html(percentComplete);
            }
        }, false);
        return xhr;
    },
    url: 'https://www.gstatic.com/swiffy/v5.4/runtime.js',
    dataType: 'script',
    complete: function(xhr) {
        //you can use the xhr object to check for response codes 
        $('div#processing_load').hide();
        $('#swiffycontainer').css('display', 'block');
        $('.landing-banner').css('display', 'none');

        var stage = new swiffy.Stage(document.getElementById('swiffycontainer'), swiffyobject);
        stage.start();
        stage.setBackground(null);
    }
});

如何知道外部js是否加载，并将百分比加载器放到那个时间

2 个答案: