延迟加载 JavaScript - Uncaught ReferenceError: $ is not defined答案

【问题标题】：Defer loading of JavaScript - Uncaught ReferenceError: $ is not defined延迟加载 JavaScript - Uncaught ReferenceError: $ is not defined
【发布时间】：2014-01-27 14:38:53
【问题描述】：

我使用谷歌代码延迟加载 javascript (google pages)

但我有一些内联 javascript，例如：

<script type="text/javascript">
$(function () {
    alert("please work");
});
</script>

这给了我：

未捕获的引用错误：$ 未定义

我想我需要一些函数，它是在加载 jQuery 并初始化我的内联 javascripts 后触发的。但如果有其他方法，我会很高兴的。

编辑：

你们中的一些人完全跑题了。 Mahesh Sapkal 很接近。

使用此代码我没有错误，但仍然无法正常工作

<head>
    <script type="text/javascript">
        var MhInit = NULL;

        // Add a script element as a child of the body
        function downloadJSAtOnload() {
            var element = document.createElement("script");
            MhInit = element.src = "my_packed_scripts.js";
            document.body.appendChild(element);
        }

        // 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>

</head>
<body>
    <script type="text/javascript">
        MhInit.onload = function() {
            console.debug("here");
        };
    </script>
</body>

【问题讨论】：

使用 jQuery.noConflict();

标签： javascript jquery deferred-loading asynchronous-javascript

【解决方案1】：

在加载之前您不能使用jQuery。如果您移动页面底部的<script src="jquery.js" />，您还必须将所有使用$(...) 的行移到其下方。

有一个棘手的解决方案是这样的：

1) 在页面顶部定义几个变量：

var _jqq = [];
var $ = function(fn) {
    _jqq.push(fn);
};

2) 在页面中间可以写：

$(function() {
    alert("document ready callback #1");
});
$(function() {
    alert("document ready callback #2");
});

3) 在页面底部，包含 jQuery：

<script src="//code.jquery.com/jquery.min.js"></script>

4) 最后：

$(function() {
    $.each(_jqq, function(i, fn) {
        fn();
    });
});

Demo

【讨论】：

这看起来很棒而且很简单，不过我还在测试它，很快就会更新

【解决方案2】：

由于您推迟加载 jquery，您的内联 javascript 应该只在 jquery 完成加载时调用。使用以下代码检查库是否已加载。

var scriptElem = document.createElement("script");

scriptElem.onload = function() {
    alert('please work');
};

scriptElem.src = "http://code.jquery.com/jquery-1.10.1.min.js";

document.getElementsByTagName("head")[0].appendChild(scriptElem);

【讨论】：

【解决方案3】：

如果您要实现 Javascript 的异步加载，那么最好不要使用依赖于异步加载文件的内联 Javascript。

我怀疑您正在异步加载 jQuery，即在加载 DOM 内容之后，因此您的 DOM 中依赖于 jQuery 的任何内联脚本都会失败。在这种情况下，您可能希望使用 RequireJS 之类的东西来管理您的 JS 依赖项，并异步加载它们。

但是，如果您想寻求更简单的解决方案，我建议您将 JS 库放在 DOM 的末尾，并将所有依赖项绑定到 onload 处理程序。

类似的东西

<body>
    <!-- Body content -->
    <script>document.onload = function() { //use jQuery here }</script>
</body>
<script src="/path/to/jQuery/"></script>

【讨论】：

试过这个没有用。这应该适用于延迟的 jQuery 吗？
延迟 jQuery 是什么意思？

【解决方案4】：

当我想延迟加载 jquery 时，我会这样使用：

在标题上

<script> var callBackSomething = [];</script>

在

【解决方案5】：

试试这个http://w3schools.com/jquery/default.asp。你可以很容易地做到这一点。

<script>
$(document).ready(function(){
$("p").click(function(){
alert("please work");
});
});
</script>

【讨论】：

$ 未定义。您不能调用$ 来延迟加载JS，直到$ 可用。