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，Google 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时触发事件

1 个答案: