Jquery 为什么DOM就绪事件总是在带有requirejs的window.onload事件之后运行？_Jquery_Requirejs_Onload_Domready

Jquery 为什么DOM就绪事件总是在带有requirejs的window.onload事件之后运行？

jquery requirejs

Jquery 为什么DOM就绪事件总是在带有requirejs的window.onload事件之后运行？,jquery,requirejs,onload,domready,Jquery,Requirejs,Onload,Domready,我在我的项目中使用jquery和requirejs。最近，我发现了一些意想不到的事情。如果我通过requirejs加载jquery是什么。DOM就绪事件总是在window.onload事件之后触发以下是我的例子：请注意，ready2始终在window.onload之后运行。如果我稍微修改一下代码，就会有所不同 //do not use requirejs to load jquery //require(['jquery'], function () { require([], funct

我在我的项目中使用jquery和requirejs。最近，我发现了一些意想不到的事情。如果我通过requirejs加载jquery是什么。DOM就绪事件总是在window.onload事件之后触发

以下是我的例子：

请注意，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之后激发

我不知道为什么会发生这种情况，有没有办法解决这个问题

更新：
谢谢德尔曼。正如dherman提到的document.readyState。我做了一些小调查，找到了解决问题的办法。我已经在Chrome和Firefox上测试过了。它工作得很好。然而，这可能不是一个完美的解决方案，因为在DOM完全加载之前，所有版本的IE都可以具有交互状态。（）

以下是我更新的示例：


JS-Bin
requirejs.config({
路径：{
jquery:['//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min']
}
});
require（['jquery']，函数（）{
console.log（'已加载所需的Moudel'）；
var init=函数（）{
console.log（'document.ready'）；
};
如果（document.attachEvent？document.readyState=='complete'：document.readyState！=='loading'）{
init（）；
}否则{
$（函数（）{init（）；}）；
}
});
window.onload=函数（）{
console.log（'window.onload'）；
};

本机

DOMContentLoaded

事件正好在文档准备就绪时触发。由于您是通过RequireJS加载jQuery，因此可能会错过该事件。当这种情况发生时，jQuery不知道文档已经准备好，必须等待

load

事件被激发，或者如果load已经被激发，jQuery也不知道

document.readyState==“complete”

。

我保证dom ready事件在窗口onload之前被激发。相反，绑定到它的代码是在窗口加载之后执行的，因为它在那个时候已经准备好了，所以它会立即执行。首先，在我的示例中，页面包含一个大图片，需要一段时间才能完全加载图片。其次，它在控制台中打印出“所需的Moudel已加载”一句并停止。过了一会儿，“window.onload”和“document.ready2”被打印出来。“document.ready2”总是在“window.onload”之后打印。显然，dom ready绑定函数在绑定到dom-ready时并没有立即执行。您正在哪个浏览器中测试？有些浏览器实际上没有dom就绪事件，在这些浏览器中，jQuery的dom就绪处理程序可能会以不同的方式触发。这种情况的处理方式已经从一个版本到另一个版本（jQuery）发生了变化，我认为最新的版本在IE9/10中触发是正确的，但在IE7/8的后期，我在chrome中看到了这样的行为：实际上。。。我的小提琴设置不正确，它包括两个版本的jQuery。现在我看不到您所描述的行为：有时onload确实发生在ready2之前，但是，每次发生这种情况时，都是因为require模块在onload之后加载，这意味着domready处理程序直到之后才被绑定（这是缓存映像后所期望的）

//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

<!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>