3

我使用谷歌代码来推迟加载 javascript（谷歌页面）

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

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

这给了我：

未捕获的 ReferenceError：$ 未定义

我想我需要一些函数，它是在加载 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>
4

5 回答 5

5

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();
    });
});

演示

于 2014-01-09T07:21:18.977 回答
2

如果您要实现 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>
于 2014-01-09T07:06:42.750 回答
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);
于 2014-01-09T07:14:30.043 回答
0

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

在标题上

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

在</body>标签之后

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

在 main.js 中

if (typeof callBackSomething !== 'undefined' && $.isArray(callBackSomething )){
    $.each(callBackSomething , function (k, v) {
        if($.isFunction(v))
            v();
    });
}

并在页面

let js_callback = function () {
// code jquery in here
};
callBackSomething.push(js_callback);
于 2018-07-27T03:00:05.263 回答
-3

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

<script>
$(document).ready(function(){
$("p").click(function(){
alert("please work");
});
});
</script>
于 2014-01-09T07:11:14.637 回答