用于检测何时加载外部Java脚本的JavaScript

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

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

---

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

由于所有浏览器在处理

标记时都会阻止“UI线程”，因此您可以依赖已加载的标记

如果动态加载脚本，则可以侦听

标记的加载事件

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");
});

---

如果可以使用jQuery，请尝试

$.getScript（）

。文档。

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

将在脚本加载完成时激发

您将无法执行以下操作：

<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>

函数alertonload（src）{
log（src+'is loaded'）；
}
scripts=document.getElementsByTagName（'script'）；
对于（var i=0；i我为那些希望在加载所有外部文件（动态添加）后调用函数的人编写了一个脚本。如下所示：


var文件=[]；
加载的var=[]；
var head=document.getElementsByTagName（'head'）[0]；
var fileOnLoad=
//将数组传递给函数
（函数（文件，已加载）{return function（）{
加载。推送（true）；
//打印加载的文件数
document.getElementById（“demo”）.innerHTML+=
“
”+loaded.length+“files loaded”；
if（file.length==loaded.length）{
警报（“已加载所有文件！”）；
}
}})（文件，已加载）；
////////////////////////////////////////////////
////                                        ////
////动态添加外部文件////
////                                        ////
////////////////////////////////////////////////
文件[0]=document.createElement（'script'）；
文件[0]。src=
"https://maps.googleapis.com/maps/api/js?v=3.exp";
文件[0]。onload=fileOnLoad；
head.appendChild（文件[0]）；
文件[1]=document.createElement（'script'）；
文件[1]。src=
"http://code.jquery.com/jquery-latest.js";
文件[1]。onload=fileOnLoad；
head.appendChild（文件[1]）；
文件[2]=document.createElement（'script'）；
文件[2]。src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js";
文件[2]。onload=fileOnLoad；
head.appendChild（文件[2]）；
文件[3]=document.createElement（'link'）；
文件[3]。rel=“样式表”；
文件[3]。href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css";
文件[3]。onload=fileOnLoad；
head.appendChild（文件[3]）；
文件[4]=document.createElement（'link'）；
文件[4]。rel=“样式表”；
文件[4]。href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css";
文件[4]。onload=fileOnLoad；
head.appendChild（文件[4]）；
0已加载文件
您想完成什么？这里有一个更好的方法。我正试图检测JS何时即将加载和/或加载，原因有几个。一个原因是试图阻止加载特定脚本。另一个原因是计算加载脚本所需的时间（无法依赖Firebug等）。我刚刚编写的内容的更好版本，而不是
document.getElementsByTagName（“head”）[0]
您可以使用
document.head
这将不起作用，因为在添加事件侦听器时脚本已经加载。浏览器按顺序获取和呈现脚本，直到完成后才继续，因此当您声明onload侦听器时，foo.js和bar.js已经加载并解析。
<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>