2

我使用此代码在头部加载我的 JS 异步

<script type='text/javascript'>
 // Add a script element as a child of the body
 function downloadJSAtOnload() {
var element4= document.createElement("script");
var element5= document.createElement("script");
element4.src="http:///ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"
element5.src="http://yourjavascript.com/301810712121/slidemenu_horiz.js"
element4.async=true;
element5.async=true;
document.body.appendChild(element4);
document.body.appendChild(element5);
}
 // Check for browser support of event handling capability
 if (window.addEventListener)
 window.addEventListener("load", downloadJSAtOnload, false);
 else if (window.attachEvent)
 window.attachEvent("onload", downloadJSAtOnload);
 else window.onload = downloadJSAtOnload;
</script>

在 IE 和 Firefox 中工作正常，但在 Chrome 中我有这个错误：“未捕获的 ReferenceError：jQuery 未定义”

当我第二次（或第三次）刷新页面时，脚本在 Chrome 中运行良好，我需要知道如何解决这个问题。

4

1 回答 1

3

鉴于您的需求，并且因为我过去成功使用过它，我建议使用 LABjs - http://labjs.com/

如前所述，有大量脚本加载器可供选择 - LABjs 更注重性能，不包含许多其他功能，例如 requirejs（AMD 加载器）、YepNope（基于特征检测的条件加载器）有。如果您只需要异步加载脚本并控制执行顺序，那么 LABjs 是一个非常小的脚本，可以很好地处理这个问题。

使用 LABjs，您将执行以下操作来复制上面的代码：

<script src="js/libs/LAB.js"></script>
<script>
$LAB
.script('http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js').wait()
.script('http://yourjavascript.com/301810712121/slidemenu_horiz.js')
.wait(function () {
    // Check jQuery has loaded (could do this for the slider as well)
    if (window.jQuery) {
        // Do something with your slider
    }
});
</script>

在上面的示例中，该.wait()函数确保 jQuery 在 slidemenu_horiz.js 之前执行 - 最后.wait()一个作为回调传递一个匿名函数 - 在此您可以测试所有内容是否已加载，然后进行初始化。

就脚本加载器而言，值得检查所有选项。确实有很多负载，每个都有不同的功能集，您可能会发现它们可以更好地解决您的问题。

编辑：为清楚起见，在代码示例中添加了对 LABjs 的脚本引用

于 2013-01-22T00:45:28.573 回答