我在我的项目中使用 jquery 和 requirejs。最近，我发现了一些我意想不到的事情。如果我通过 requirejs 加载 jquery，这是什么。 DOM 就绪事件总是在 window.onload 事件之后触发。
这是我的示例:http://jsbin.com/ozusIBE/2
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<img src="http://thejetlife.com/wp-content/uploads/2013/06/Times_Square_New_York_City_HDR.jpg" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.5/require.min.js"></script>
<script>
window.onload = function () {
console.log('window.onload');
};
$(function () {
console.log('document.ready1');
});
requirejs.config({
paths: {
jquery: ['//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min']
}
});
require(['jquery'], function () {
console.log('required moudels have been loaded');
$(function () {
console.log('document.ready2');
});
});
</script>
</body>
</html>
当我加载没有缓存的页面时。控制台的结果是:
document.ready1
required moudels have been loaded
window.onload
document.ready2
请注意，ready2 始终在 window.onload 之后运行。 如果我稍微改变一下代码就会有所不同。
//do not use requirejs to load jquery
//require(['jquery'], function () {
require([], function () {
console.log('required moudels have been loaded');
$(function () {
console.log('document.ready2');
});
});
结果是:
document.ready1
required moudels have been loaded
document.ready2
window.onload
看来如果我使用requrejs将jquery作为AMD模块异步加载。 DOM 就绪事件没有用。因为 DOM 就绪事件将在 window.onload 之后触发。
我不知道为什么会发生这种情况，有什么办法可以解决这个问题吗？
更新:
感谢德尔曼。
正如德尔曼提到的document.readyState。我进行了小型调查并找到了该问题的解决方案。我已经在 Chrome 和 Firefox 上测试过了。效果很好。然而，这可能不是一个完美的解决方案，因为所有版本的 IE 都可以在 DOM 完全加载之前具有交互状态。 (ref)
这是我更新的示例:http://jsbin.com/ozusIBE/16
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<img src="http://upload.wikimedia.org/wikipedia/commons/a/ab/NYC_-_Time_Square_-_From_upperstairs.jpg" />
<script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.9/require.min.js"></script>
<script>
requirejs.config({
paths: {
jquery: ['//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min']
}
});
require(['jquery'], function () {
console.log('required moudels have been loaded');
var init = function(){
console.log('document.ready');
};
if ( document.attachEvent ? document.readyState === 'complete' : document.readyState !== 'loading' ){
init();
}else{
$(function(){ init(); });
}
});
window.onload = function () {
console.log('window.onload');
};
</script>
</body>
</html>
最佳答案
native DOMContentLoaded 事件恰好在它应该的时候触发 - 当文档准备好时。由于您是通过 RequireJS 加载 jQuery，因此您可能会错过该事件。当发生这种情况时，jQuery 不知道文档已准备好，必须等待 load 事件被触发，或者 document.readyState === "complete" load 也已经触发的情况。
关于jquery - 为什么 DOM Ready 事件总是在 requirejs 的 window.onload 事件之后运行？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18791021/