Question

我使用谷歌代码推迟加载javascript（google pages）

但是我有一些内联的javascripts，例如：

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

Answer 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

Answer 2

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

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

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

像这样的东西

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

Answer 3

由于你推迟加载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);

Answer 4

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

在标题上

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

标记之后

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

Answer 5

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

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

延迟加载JavaScript - 未捕获的ReferenceError：$未定义

5 个答案: