用于检测外部 javascript 何时加载的 JavaScript答案

【问题标题】：JavaScript to detect when external javascripts are loading用于检测外部 javascript 何时加载的 JavaScript
【发布时间】：2012-01-03 20:41:03
【问题描述】：

有没有办法（事件侦听器或其他方式）来检测特定外部 javascript 何时即将加载/正在加载/已完成加载？

换句话说，浏览器是否会在即将加载、正在加载和/或已完成加载特定外部脚本时触发事件？

就我的目的而言，仅仅检查是否存在已知对象或类似的东西是不够的。相反，我需要一些能够检测 JS 文件正在加载/加载的东西，而不管 JS 文件的内容如何。

【问题讨论】：

你想完成什么？这上面写着“有更好的方法”。
我正在尝试检测 JS 何时即将加载和/或出于某些原因正在加载。一个原因是试图阻止加载特定的脚本。另一个是计算脚本加载所需的时间（不能依赖 Firebug 等）。

标签： javascript

【解决方案1】：

以下示例适用于 Chrome。它在 head 标签的 onload 事件上附加一个处理程序，然后添加一个外部 javascript 文件。加载文件时，会捕获事件并显示警报。

http://jsfiddle.net/francisfortier/uv9Fh/

window.onload = function() {
    var head = document.getElementsByTagName("head")[0];
    var script = document.createElement("script"); 

    script.setAttribute("type", "text/javascript");
    script.setAttribute("src", "http://code.jquery.com/jquery-1.7.1.min.js");

    head.addEventListener("load", function(event) {
        if (event.target.nodeName === "SCRIPT")
        {
            alert("Script loaded: " + event.target.getAttribute("src"));
        }
    }, true);

    head.appendChild(script); 
}

【讨论】：

我刚刚写的更好的版本\
你可以用document.getElementsByTagName("head")[0]代替document.head

【解决方案2】：

由于所有浏览器在处理<script> 标签时都会阻止“UI 线程”，因此您可以依赖已加载的预先存在的标签。

如果是动态加载脚本，可以监听<script>标签的加载事件。

function loadScript(src, callback) {
    var script  = document.createElement("script");
    script.setAttribute("src", src);
    script.addEventListener("load", callback);
    document.getElementsByTagName("script")[0].insertBefore(script);
};

loadScript("http://code.jquery.com/jquery-1.7.1.min.js", function(){
    alert("loading is done");
});

【讨论】：

【解决方案3】：

<script onload> 将在脚本完成加载时触发。

您将无法执行以下操作：

<script src="/foo.js"></script>
<script src="/bar.js"></script>
<script>
function alertonload(src){
   console.log(src+' is loaded');
}
scripts = document.getElementsByTagName('script');
for(var i=0; i<scripts.length; i++){
    scripts[i].onload = function(){ alertonload(scripts[i].src); };
}
</script>

这纯属猜想和推测；我还没有尝试过，可能有更好的方法来编写它，但这不会做你想做的事。编辑：脚本在浏览器看到它们时加载，而不是事后加载。它们将在此发生之前加载。

【讨论】：

这不起作用，因为在您添加事件侦听器时脚本已经加载。浏览器按顺序获取和渲染脚本，直到完成后才会继续，所以当你声明 onload 监听器时，foo.js 和 bar.js 已经被加载和解析了。

【解决方案4】：

我为那些想要在加载所有外部文件（动态添加）后调用函数的人编写了一个脚本。它是这样的：

var file = [];
var loaded = [];
var head = document.getElementsByTagName('head')[0];

var fileOnLoad =
// Pass the arrays to your function
(function(file, loaded){ return function(){
  
  loaded.push(true);
  
  // Print the number of files loaded
  document.getElementById("demo").innerHTML +=
   "<br>"+loaded.length+" files loaded";
  
  if(file.length == loaded.length){
    
    alert("All files are loaded!");
  }
}})(file, loaded);

////////////////////////////////////////////////
////                                        ////
////   Add the external files dynamically   ////
////                                        ////
////////////////////////////////////////////////

file[0] = document.createElement('script');
file[0].src =
"https://maps.googleapis.com/maps/api/js?v=3.exp";
file[0].onload = fileOnLoad;
head.appendChild(file[0]);

file[1] = document.createElement('script');
file[1].src =
"http://code.jquery.com/jquery-latest.js";
file[1].onload = fileOnLoad;
head.appendChild(file[1]);

file[2] = document.createElement('script');
file[2].src =
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js";
file[2].onload = fileOnLoad;
head.appendChild(file[2]);

file[3] = document.createElement('link');
file[3].rel = "stylesheet";
file[3].href =
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css";
file[3].onload = fileOnLoad;
head.appendChild(file[3]);

file[4] = document.createElement('link');
file[4].rel = "stylesheet";
file[4].href =
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css";
file[4].onload = fileOnLoad;
head.appendChild(file[4]);

&lt;div id="demo"&gt;0 file loaded&lt;/div&gt;

希望对你有帮助！

【讨论】：

【解决方案5】：

如果你可以使用 jQuery，试试$.getScript()。文档here.

【讨论】：