延迟加载JavaScript – 未捕获的ReferenceError:$未定义

我使用谷歌代码推迟加载JavaScript( 谷歌页面 )

但我有一些内联javascripts,如:

 $(function () { alert("please work"); });  

这给了我:

未捕获的ReferenceError:$未定义

我想我需要一些函数,这是在jQuery加载后启动并初始化我的内联javascripts。 但如果有另一种方式,我会很高兴。

编辑:

有些人完全没有话题。 Mahesh Sapkal很接近。

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

   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;     MhInit.onload = function() { console.debug("here"); };   

在加载之前不能使用jQuery 。 如果你移动页面底部的 ,你还必须移动在它下面使用$(...)所有行。

有一个棘手的解决方案可以解决这些问题:

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

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

2)在页面中间你可以写:

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

3)在页面底部,包含jQuery:

  

4)最后:

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

演示

由于您推迟加载jquery,因此只应在jquery加载完成后调用内联javascript。 使用以下代码检查库是否已加载。

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

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

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

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

像这样的东西

      

当我想延迟加载jquery时,我会这样使用:

在标题上

  

标签之后

   

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

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