要检测外部javascripts加载时要检测的JavaScript

Question

有没有一种方法（事件监听器或其他方式）来检测特定的外部JavaScript何时加载/正在加载/已完成加载？

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

对于我的目的来说，仅仅检查是否存在一个已知对象或其他类似的东西是不够的。相反，我需要一些能够检测到JS文件正在加载/加载而不管JS文件的内容。

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

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

Answer 3

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

Answer 4

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

这纯粹是主观臆测和炒作;我还没有尝试过，有可能有更好的方法来写它，但这不会做你想要做的。编辑：脚本加载浏览器看到他们，而不是事后。它们会在发生之前加载。

Answer 5

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

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]);

<div id="demo">0 file loaded</div>

希望它能帮助！