domReady在RequireJS中似乎触发得很晚 [英] domReady seems to fire late in RequireJS
问题描述
在我的应用程序中，当我使用require(来自RequireJS)时，domReady事件会触发似乎实际上是load事件的事件(当所有图像，脚本等完成加载时).这是预期的吗?
In my application when I use require (from RequireJS), the domReady event fires on what seems to actually be the load event (when all images, scripts, etc are finished being loaded). Is this expected?
我有一堆使用document.ready的代码(来自jQuery)，由于domReady事件触发得很晚，因此无法正常运行.我编写了一个示例脚本来显示我所面临的问题.
I have a bunch of code that uses document.ready (from jQuery) and it's not running properly because the domReady event is firing very late. I've written an example script that shows the problem I'm facing.
<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后立即触发.但是相反，只有在完成大图像下载后才会触发.
This HTML example loads a very large image. I would expect the code within $(document).ready would fire immediately after jQuery is loaded. But instead it fires only once the large image is done downloading.
我在做什么错了?
推荐答案
使用以下 jsfiddle测试，它将侦听器附加到window.DOMContentLoaded，window.load，$()和require["domReady!]:
Using the following jsfiddle test, which will attach listeners to window.DOMContentLoaded, window.load, $() and 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):
I get these results (FF 23, Chrome 29, IE 9):
FF清理缓存.
[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清理缓存.
Chrome clean cache.
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灌注缓存.
Chrome primed cache.
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清理缓存.
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中的回调顺序相同:
So the order of callbacks is the same in FF, Chrome and IE when the cache is clean:
- DOMContentLoaded
- jquery.ready
- window.load
- domReady！
但是，当启动缓存时，IE的顺序会发生变化. FF和Chrome保持不变.
But IE's order changes when the cache is primed. FF and Chrome stay the same.
FF和IE似乎第二次运行都快得多.尽管缓存已准备好，但Chrome似乎有大致相同的延迟.
And both FF and IE seem to run far quicker second time around. Chrome seems to have roughly the same delays despite the cache being primed.
如果需要，您将必须执行自己的测试，因为我只运行了几次.因此，我不是说这是一致的行为(尽管可能是这样).
You will have to perform your own tests if necessary, as I only ran these a couple of times. So I am not saying this is consistent behaviour (although it could be).
您当然可以忽略所有这些回调，而只需在页面末尾的</body>标记内添加一个脚本块.脚本块上方的所有DOM元素应可用于某些操作.同样，您将必须测试您的特定页面/站点.
You can of course ignore all these callbacks and simply add a script block at the end of your page inside your </body> tag. All the DOM elements above the script block should be available for certain manipulations. Again, you will have to test for your particular page/site.
这篇关于domReady在RequireJS中似乎触发得很晚的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
