加载异步 javascript 时触发事件

Question

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

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

在 body 标签结束之前，我包含了以下代码来执行回调：

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

基本上，如果 external.js 被缓存，当解析器到达此代码时， myFunction 被定义并且它将被执行。如果没有，则在调用 myFunction 之前必须等待所有外部资源可用。因此，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();
    }
}

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