加载异步 javascript 时触发事件

Question

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

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

在正文标记结束之前，我包含了这段代码来执行回调：

if (typeof(myFuncion) === "function") {
    myFunction();
} else {
    window.onload = myFunction;
}

基本上，如果 external.js 被缓存，当解析器到达这段代码时，myFunction 被定义并被执行。如果没有，那么在调用 myFunction 之前它将必须等待 all 外部资源可用。因此，myFunction 将等待 AdSense、Analytics 等，而实际上它仅取决于 external.js.

这对我来说意义不大。关于如何将 window.onload 替换为加载 external.js 时会触发的内容的任何建议？

Answer 1

您应该通过 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();
    }
}

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

加载异步 javascript 时触发事件

Fire off an event when async javascript is loaded

javascript

events

asynchronous

onload