延迟加载 JavaScript - Uncaught ReferenceError: $ is not defined
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21013554/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Defer loading of JavaScript - Uncaught ReferenceError: $ is not defined
提问by Manic Depression
I use google code to defer loading javascript (google pages)
我使用谷歌代码来推迟加载 javascript（谷歌页面）
But I have some inline javascripts such as:
但我有一些内联 javascript，例如：
<script type="text/javascript">
$(function () {
alert("please work");
});
</script>
And this gives me:
这给了我：
Uncaught ReferenceError: $ is not defined
未捕获的 ReferenceError: $ 未定义
I think I need some function, which was triggered after jQuery was loaded and init my inline javascripts. But if there is another way, I will be glad.
我想我需要一些函数，它是在加载 jQuery 并初始化我的内联 javascripts 之后触发的。但如果有另一种方式，我会很高兴。
EDIT:
编辑：
Some of you are completely out of topic. Mahesh Sapkal was close.
你们中的一些人完全没有话题。Mahesh Sapkal 很接近。
With this code I have no error, but still don't work
使用此代码我没有错误，但仍然无法正常工作
<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>
回答by Salman A
You cannot use jQuerybefore it is loaded. If you move the <script src="jquery.js" />at the bottom of your page you must also move all the lines that use $(...)below it.
jQuery加载前不能使用。如果您移动<script src="jquery.js" />页面底部的 ，则还必须移动其$(...)下方使用的所有行。
There is a tricky solution that goes something along these lines:
有一个棘手的解决方案，沿着这些路线：
1) Defining few variables at the top of your page:
1）在页面顶部定义几个变量：
var _jqq = [];
var $ = function(fn) {
_jqq.push(fn);
};
2) In the middle of the page you can write:
2）在页面中间可以写：
$(function() {
alert("document ready callback #1");
});
$(function() {
alert("document ready callback #2");
});
3) At the bottom of your page, include jQuery:
3) 在页面底部，包含 jQuery：
<script src="//code.jquery.com/jquery.min.js"></script>
4) And finally:
4）最后：
$(function() {
$.each(_jqq, function(i, fn) {
fn();
});
});
回答by Achrome
If you are going to implement async loading of Javascripts, then it would be a better idea to not have inline Javascript which depends on the asynchronously loaded file.
如果您要实现 Javascript 的异步加载，那么最好不要使用依赖于异步加载文件的内联 Javascript。
I suspect that you are loading jQuery asynchronously, i.e. after the DOM content has loaded, so any inline scripts in your DOM dependent on jQuery will fail. In that case, you may want to use something like RequireJS to manage your JS dependencies, and load them asynchronously.
我怀疑您正在异步加载 jQuery，即在 DOM 内容加载后，因此您的 DOM 中依赖于 jQuery 的任何内联脚本都将失败。在这种情况下，您可能希望使用 RequireJS 之类的东西来管理您的 JS 依赖项，并异步加载它们。
However, if you want to go for a simpler solution, I would suggest putting your JS libraries at the end of the DOM, and binding any dependencies to an onloadhandler.
但是，如果您想寻求更简单的解决方案，我建议将您的 JS 库放在 DOM 的末尾，并将任何依赖项绑定到onload处理程序。
Something like this
像这样的东西
<body>
<!-- Body content -->
<script>document.onload = function() { //use jQuery here }</script>
</body>
<script src="/path/to/jQuery/"></script>
回答by Mahesh Sapkal
Since you are deferring loading of jquery, your inline javascript should only be called when jquery has finished loading. Use the following code, to check if the library was loaded.
由于您推迟了 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);
回答by Hung Pham
when i want defer load jquery, i use like that:
当我想延迟加载 jquery 时，我是这样使用的：
on header
在标题上
<script> var callBackSomething = [];</script>
after < /body> tag
</body> 标签之后
<script defer src="//code.jquery.com/jquery.min.js"></script>
<script defer src="main.js"></script>
in main.js
在 main.js 中
if (typeof callBackSomething !== 'undefined' && $.isArray(callBackSomething )){
$.each(callBackSomething , function (k, v) {
if($.isFunction(v))
v();
});
}
and in page
并在页面中
let js_callback = function () {
// code jquery in here
};
callBackSomething.push(js_callback);
回答by vikas agrahari
try this http://w3schools.com/jquery/default.asp. you can easily do that.
试试这个http://w3schools.com/jquery/default.asp。你可以很容易地做到这一点。
<script>
$(document).ready(function(){
$("p").click(function(){
alert("please work");
});
});
</script>
