关于jquery：Javascript延期函数


Javascript Deferred Functions

我一直在寻找javascript，尝试让一些代码异步加载。

我找到了这个代码示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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;
}

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

问题是，它并没有完全实现我想要实现的目标。我希望能够做一些类似的事情，但是设置一个延迟的或者在加载完之后调用的某种类型的函数。有可能吗？如果有的话，有人能帮忙解释一下吗？

相关讨论

您可以尝试使用正在加载的script标记的onload事件。请参见这个问题，例如：尝试在脚本标记上激发onload事件。然而，这个机制看起来相当粗略，可能不是跨浏览器的。

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

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

相关讨论

您已将jquery标记为您的问题。它有$.getScript()，它以一种完全跨浏览器的方式执行您所要求的操作。它将异步加载脚本，然后在脚本完成加载和初始化后调用指定的回调：

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

如果您真的想在加载此脚本之前等待直到加载DOM(通常不需要)，可以这样做：

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

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

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

如果您对脚本加载时间(尤其是使用defer和async属性)的一些引用感兴趣，可以阅读这篇详细的文章。