Question

我使用此代码在头部加载我的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中正常运行，请知道如何解决此问题。

Answer 1

鉴于您的需求，并且因为我过去成功使用过它，我建议使用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的脚本引用

未捕获的ReferenceError：jQuery仅在Chrome中定义

1 个答案: