加载异步JavaScript时触发事件

JonR 发表于 Dev

乔纳

我正在更改要异步加载的外部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实际上仅依赖于external.js时，它将等待AdSense，Analytics（分析）...。

这对我来说没有多大意义。关于如何将window.onload替换为在加载external.js时触发的某些建议？

TaoPR

您应该通过JavaScript而不是使用script标签来注入脚本，以便完全控制load事件。请参见下面的示例：

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();
    }
}

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。