在我的应用程序中，当我使用require（来自RequireJS）时，domReady事件会触发实际上似乎是load事件（当所有图像，脚本等都完成加载时）。这是预期的吗？
我有一堆使用document.ready（来自jQuery）的代码并且它运行不正常，因为domReady事件触发很晚。我写了一个示例脚本来显示我面临的问题。
<html>
<head>
</head>
<body>
<script type="text/javascript" src="http://ratel.apache-extras.org.codespot.com/svn-history/r6/trunk/ratel/web/js/lib/require.js"></script>
<script>
require.config({
paths: {
"jquery": '//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min',
"jquery.validate": '//ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min'
},
shim: {
"jquery.validate": ["jquery"]
}
});
require(["jquery"], function (){
$(document).ready(function(){
console.log("the document is ready");
});
});
</script>
<img src="http://ie.microsoft.com/testdrive/HTML5/DOMContentLoaded/whidbey.jpg" width="300" height="300">
</body>
</html>
此HTML示例加载了一个非常大的图像。我希望$（document）.ready中的代码会在加载jQuery后立即触发。但相反，只有在下载完大图像后才会触发。
我在这里做错了什么？
答案 0 :(得分：4)
使用以下jsfiddle test，它会将听众附加到window.DOMContentLoaded，window.load，$()和require["domReady!]：
<script>
// IE patch
if (Function.prototype.bind && window.console && typeof console.log == "object") {
["log","info","warn","error","assert","dir","clear","profile","profileEnd"].forEach(function (method) {
console[method] = this.bind(console[method], console);
}, Function.prototype.call);
}
startTime = +new Date();
require = {
paths: {
"domReady": "https://rawgithub.com/requirejs/domReady/2.0.1/domReady",
"jquery": "http://code.jquery.com/jquery-1.10.2.min"
},
waitSeconds: 60
};
</script>
<script src="http://requirejs.org/docs/release/2.1.8/minified/require.js"></script>
<script>
function log() {
var args = Array.prototype.slice.apply(arguments);
var evt = args[0];
var type = evt && evt.type;
args = [+new Date() - startTime + "ms", type].concat(args);
console.log.apply(console, args);
}
require(["jquery"], function($) {
$(log("jquery.ready"));
});
require(["domReady!"], log);
window.addEventListener('load', log, false);
window.addEventListener('DOMContentLoaded', log, false);
</script>
<img id="theImg" src="http://ie.microsoft.com/testdrive/HTML5/DOMContentLoaded/whidbey.jpg" width="300" height="300">
<script>
var theImg = document.getElementById("theImg");
log("I am the trailing script and this is the image", theImg, theImg.id, theImg.parentNode, theImg.nextSibling);
</script>
我得到了这些结果（FF 23，Chrome 29，IE 9）：
FF clean cache。
[22:08:47.477] "488ms" undefined "I am the trailing script and this is the image" [object HTMLImageElement] "theImg" [object HTMLBodyElement] [object Text]
[22:08:47.478] "489ms" "DOMContentLoaded" [object Event]
[22:08:47.838] "849ms" undefined "jquery.ready"
[22:09:00.770] "13781ms" "load" [object Event]
[22:09:00.773] "13783ms" undefined [object HTMLDocument]
FF准备缓存。
[22:09:19.881] "3ms" undefined "I am the trailing script and this is the image" [object HTMLImageElement] "theImg" [object HTMLBodyElement] [object Text]
[22:09:19.881] "3ms" "DOMContentLoaded" [object Event]
[22:09:19.883] "5ms" "load" [object Event]
[22:09:19.908] "30ms" undefined "jquery.ready"
[22:09:20.176] "298ms" undefined [object HTMLDocument]
Chrome清理缓存。
745ms undefined I am the trailing script and this is the image <img id=?"theImg" src=?"http:?/?/?ie.microsoft.com/?testdrive/?HTML5/?DOMContentLoaded/?whidbey.jpg" width=?"300" height=?"300">? theImg <body>?…?</body>? #text
751ms DOMContentLoaded Event {clipboardData: undefined, cancelBubble: false, returnValue: true, srcElement: document, defaultPrevented: false…}
2024ms undefined jquery.ready fiddle.jshell.net/fiddlegrimbo/QrUxr/17/show/:53
16105ms load Event {clipboardData: undefined, cancelBubble: false, returnValue: true, srcElement: document, defaultPrevented: false…}
16127ms undefined #document
Chrome已启动缓存。
503ms undefined I am the trailing script and this is the image <img id=?"theImg" src=?"http:?/?/?ie.microsoft.com/?testdrive/?HTML5/?DOMContentLoaded/?whidbey.jpg" width=?"300" height=?"300">? theImg <body>?…?</body>? #text
508ms DOMContentLoaded Event {clipboardData: undefined, cancelBubble: false, returnValue: true, srcElement: document, defaultPrevented: false…}
1211ms undefined jquery.ready fiddle.jshell.net/fiddlegrimbo/QrUxr/17/show/:53
14952ms load Event {clipboardData: undefined, cancelBubble: false, returnValue: true, srcElement: document, defaultPrevented: false…}
14953ms undefined #document
IE clean cache。
LOG: 363msundefinedI am the trailing script and this is the image[object HTMLImageElement]theImg[object HTMLBodyElement][object Text]
LOG: 364msDOMContentLoaded[object Event]
LOG: 1171msundefinedjquery.ready
LOG: 13743msload[object Event]
LOG: 13747msundefined[object Document]
IE已准备好缓存。
LOG: 6msundefinedI am the trailing script and this is the image[object HTMLImageElement]theImg[object HTMLBodyElement][object Text]
LOG: 126msDOMContentLoaded[object Event]
LOG: 128msload[object Event]
LOG: 164msundefinedjquery.ready
LOG: 416msundefined[object Document]
因此，当缓存是干净的时，FF，Chrome和IE中的回调顺序是相同的：
但是，当缓存启动时，IE的顺序会发生变化。 FF和Chrome保持不变。
FF和IE似乎第二次运行得更快。尽管缓存已经准备就绪，Chrome似乎也有大致相同的延迟。
如果有必要，你必须进行自己的测试，因为我只运行了几次。所以我不说这是一致行为（尽管可能是这样）。
您当然可以忽略所有这些回调，只需在页面末尾的</body>标记内添加一个脚本块即可。脚本块上方的所有DOM元素都应该可用于某些操作。同样，您必须测试您的特定页面/网站。
答案 1 :(得分：0)
https://github.com/jquery/jquery/blob/master/src/core/ready.js#L64
我最近在自己的项目中遇到了这个问题，发现在DOMContentLoaded之后和window.load之前加载jquery时出现了问题。如果你仔细阅读上面列出的jquery源代码，你会发现jquery实际上无法知道DOMContentLoaded已经触发了，因为你的$ .ready代码会等待window.load。
这是加载jquery异步，确定文档加载状态（jquery内部）以及在doc中加载大/慢文件的问题。
您有两种选择 - 同步加载jquery或停止使用$ .ready功能。