用于检测外部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");
});