2

在我的应用程序中，当我使用 require（来自 RequireJS）时，domReady 事件在看起来实际上是加载事件（当所有图像、脚本等都完成加载时）触发。这是预期的吗？

我有一堆使用 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 加载后立即触发。但相反，它仅在大图像下载完成后才会触发。

我在这里做错了什么？

4

2 回答 2

4

使用以下jsfiddle 测试，它将侦听器附加到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 清理缓存。

[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 清理缓存。

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中回调的顺序是一样的：

  • DOMContentLoaded
  • jquery.ready
  • 窗口加载
  • domReady！

但 IE 的顺序会在缓存启动时发生变化。FF 和 Chrome 保持不变。

FF 和 IE 似乎第二次运行得更快。尽管缓存已启动，但 Chrome 似乎有大致相同的延迟。

如有必要，您将不得不执行自己的测试，因为我只运行了几次。所以我并不是说这是一致的行为（尽管它可能是）。

忽略准备/加载/$()/domReady！ETC

</body>您当然可以忽略所有这些回调，只需在标签内的页面末尾添加一个脚本块。脚本块上方的所有 DOM 元素都应该可用于某些操作。同样，您必须测试您的特定页面/站点。

于 2013-09-09T20:55:56.900 回答
0

https://github.com/jquery/jquery/blob/master/src/core/ready.js#L64

我最近在自己的项目中遇到了这个问题，发现当 jquery 在 DOMContentLoaded 之后和 window.load 之前加载时，这是一个问题。如果您阅读上面列出的 jquery 源代码，您会发现 jquery 基本上无法知道 DOMContentLoaded 已触发，这会使您的 $.ready 代码等待 window.load。

这是异步加载 jquery、确定文档加载状态（jquery 内部）以及在文档中加载大/慢文件的问题。

您有两个选择 - 同步加载 jquery 或停止使用 $.ready 功能。

于 2015-06-05T02:28:58.607 回答