Question

我尝试在页面加载时显示进度条。我希望在加载js文件后更改进度条的宽度。最后将所有使用进度条设置的文档加载到100％。现在我需要识别用javascript加载的js文件。这可能吗？请指教。

Answer 1

对于内部js文件加载识别：

由于可以从另一个文件访问函数和变量，您可以设置全局进度变量的值，并通过调用函数显示它的值

//on page or head js file
var progress = 0;

function displayProgress()
{
//show progress based on 'progress' variable
}
//file1.js
progress += 10;
displayProgress();
...
//file2.js
progress += 20;
displayProgress();
...

对于外部js文件，有很好的article。主要思想是定期检查外部函数的存在性（typeof fixpng =='function'），如果存在，则停止检查并显示进度。

这是用于加载外部库的JavaScript代码回调传入：
 function loadExtScript(src, callback) {   var s =   document.createElement('script');   s.src = src; document.body.appendChild(s); // if loaded...call the callback }
Firefox允许您监听脚本上的onload事件   元素：

s.onload = callback;

使用Internet Explorer，您可以等待脚本的状态更改   元素：

s.onreadystatechange = function() { if ( this.readyState != "loaded" ) return; callback.call(); }

Safari出现问题 - Safari没有事件发生变化，所以   我们无法判断脚本何时加载。这是我来的解决方案   （这个解决方案也适用于Opera）：
function loadExtScript(src, test, callback) {   var s = 

document.createElement('script');   s.src = src;  
document.body.appendChild(s);


  var callbackTimer = setInterval(function() {
    var call = false;
    try {
      call = test.call();
    } catch (e) {}

    if (call) {
      clearInterval(callbackTimer);
      callback.call();
    }   }, 100); }
该函数将测试作为参数。既然你是设计师在应用程序中，您将了解成功的测试是什么。一旦这个测试是是的，它将执行回调。一个简单的测试可能是检查是否存在函数，例如：
loadExtScript('/fixpng.js', function() {   return (typeof fixpng ==
'function'); }, myCallbackFunction);

Answer 2

如果你知道至少一个已定义的命名空间（几乎所有的库和插件都有它：例如jQuery，jQuery.ui，jQuery.mobile，toastr，DataTable等）或者一个由正在加载的脚本文件引入的全局变量名称，然后您可以执行此操作：

(function(undefined) {
    var scriptFilesLoaded = false,
        files = [],
        timer = setInterval(function(){
            try {
                files = [
                    jQuery, 
                    jQuery.mobile, 
                    jQuery.ui,
                    someGlobalVariableName
                ];
                if(files.indexOf(undefined)<0){
                    scriptFilesLoaded = true;
                    clearInterval(timer);
                }
            }
            catch(e) {
                console.warn('Preloader in action: Script files not loaded yet.');
            }
        },200);
})();

脚本文件是远程还是本地文件并不重要。

如何识别一个js文件加载？

2 个答案: