Question

我一直在寻找JavaScript来尝试获取一些异步加载的代码

我找到了这个代码示例

<script type="text/javascript">
function downloadJSAtOnload() {
   var element = document.createElement("script");
   element.src = "defer.js";
   document.body.appendChild(element);
}
if (window.addEventListener) {
   window.addEventListener("load", downloadJSAtOnload, false);
}
else if (window.attachEvent) {
   window.attachEvent("onload", downloadJSAtOnload);
}
else {
   window.onload = downloadJSAtOnload;
}
</script>

来自http://www.feedthebot.com/pagespeed/defer-loading-javascript.html

事情是它并没有做我想要实现的目标。我希望能够做类似的事情，但设置一个延迟或某种类型的函数，在此全部加载后调用。那可能吗？如果是这样，任何人都可以帮忙解释一下吗？

Answer 1

您可以尝试使用正在加载的onload标记的script事件。请参阅此问题，例如：Trying to fire the onload event on script tag。但是，这种机制似乎很粗略，可能不是跨浏览器。

另一种可能的方法是让正在加载的脚本触发一个可以由页面上现有的javascript处理的事件。这可能对您的特定情况有意义，也可能没有意义，它需要您控制已加载的脚本。

最后，现在javascript加载很少成为您网站的性能瓶颈。那你为什么要动态加载javascript？你可以通过加载一些其他资源来解决同样的问题，例如通过执行AJAX请求？

Answer 2

您已在自己的问题上标记了jQuery。它有$.getScript()，它完全按照纯粹的跨浏览器方式提出要求。它将异步加载脚本，然后在脚本完成加载和初始化时调用指定的回调：

$.getScript("defer.js", function() {
    // script loaded here
    // you can run code here that uses that script
});

如果你真的想等到加载DOM之后才加载这个脚本（通常没有必要），你可以这样做：

$(document).ready(function() {
    $.getScript("defer.js", function() {
        // script loaded here
        // you can run code here that uses that script
    });
});

或者，等到加载所有其他资源，包括图像：

$(window).load(function() {
    $.getScript("defer.js", function() {
        // script loaded here
        // you can run code here that uses that script
    });
});

如果您对加载脚本的某些参考文献感兴趣（特别是defer和async属性，则可以阅读this detailed post。

Javascript延期函数

2 个答案: