javascript - Uncaught ReferenceError : jQuery is not defined only in Chrome

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 的脚本引用