加载异步javascript时触发事件

我正在将外部javascript资源更改为异步加载，以加快页面加载。为此，我将async属性添加到脚本标记中：

<script async type="text/javascript" src="external.js"></script>

基本上，如果缓存了external.js，当解析器到达该代码时，就会定义myFunction并执行它。如果没有，则在调用myFunction之前，它必须等待所有外部资源可用。所以，myFunction将等待AdSense、Analytics。。。当它实际上只依赖于external.js时

---

这对我来说没什么意义。关于如何替换window.onload以替换加载external.js时会触发的内容，您有什么建议吗？

您应该使用JavaScript注入脚本，而不是使用

script

标记，以便完全控制加载事件。请参见下面的示例：

var script = document.createElement("script");
script.type = 'text/javascript';
script.src = 'external.js';
script.async = true;
document.getElementsByTagName('head')[0].appendChild(script);

script.onload = script.onreadystatechange = function() {
    if (script.readyState ||
        script.readyState === "loaded" || script.readyState === "complete"){
        // Script loaded!

        // So all dependencies are ready, call the desired function now
        myFunction();
    }
}

---

使用这种方法，您可以在脚本成功加载时捕获事件，并在加载后触发适当的函数。

也许您可以在

external.js

中执行函数，因此每当加载文件时都会调用它。是的，至少如果我可以编辑所有外部javascript。它不适用于任何第三方javascript。另外，如果缓存了external.js并在加载页面之前加载它，会发生什么情况。嗯……很有趣。为什么需要

如果（！done&&（！this.readyState | | this.readyState==“loaded”| | this.readyState==“complete”）

如果不满足此条件，将永远不会调用myFunction？现在它对我不起作用了，它可能是跨域的吗？实际上，你正在定义脚本对象，但你从来没有注入它，是吗？我刚刚修改了脚本，所以它注入了脚本标记。对不起，我一开始就错过了。要确保脚本正确加载，而不是超时或其他任何操作，您需要检查

readystate

是否已更改为

loaded

或

complete

，

this.readyState

但是在

script.onreadystatechange

上没有定义。这没有任何意义–在任何情况下都不会对后两个相等性检查进行评估：

如果（script.readyState | | script.readyState==“loaded”| script.readyState==“complete”）

var script = document.createElement("script");
script.type = 'text/javascript';
script.src = 'external.js';
script.async = true;
document.getElementsByTagName('head')[0].appendChild(script);

script.onload = script.onreadystatechange = function() {
    if (script.readyState ||
        script.readyState === "loaded" || script.readyState === "complete"){
        // Script loaded!

        // So all dependencies are ready, call the desired function now
        myFunction();
    }
}