延迟加载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时,我会这样使用:
在标题上
在 body>标签之后
在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 。 你可以轻松地做到这一点。