window.load＆amp; $（document）.ready（）与jQuery版本2和3的行为不同

Question

在这个小项目中，我尝试使用window.load和$(document).ready()

https://jsfiddle.net/23rupa07/

我读到的是，加载DOM时会立即触发$(document).ready()并且window.load正在等待，直到加载了图片为止。

对于jQuery版本2.2.4，它的工作原理如上所述，但是当我将jQuery更改为版本3.1.0时，订单将被恢复。

检查截图。有谁知道为什么？

Answer 1

jQuery2和jQuery3

之间的文档准备好了

jQuery 3的一个变化是截至目前 - document-ready 处理程序是异步的，即使文档当前已准备好添加处理程序的位置。这提供了一致的代码执行顺序，该顺序与文档是否准备好无关[1]。

此更改需要为文档就绪回调实现队列功能，这也会影响对未从jQuery对象调用的事件的其他调用。

如果我们以此代码为例：

window.addEventListener('DOMContentLoaded', function() {
  console.log('vanilla - DOMContentLoaded');
});
$(function(){
  console.log('jquery - DOM loaded');
});

jQuery2 会给我们：

jquery - DOM loaded
vanilla - DOMContentLoaded

jQuery3 会给我们：

vanilla - DOMContentLoaded
jquery - DOM loaded

我们在OP中看到的行为与＆＃34; fire＆＃34;之间的竞争条件有关。文档就绪回调和window.onload函数的事件。

此代码可以显示两个函数同时运行＆＃34;并且它只是在浏览器的VM内部执行代码的问题：

＆＃13;

＆＃13;

$(function(){
    console.log('jquery - DOM loaded')
});

window.onload = function(){
    setTimeout(function() {
        console.log('window - loaded');
    }, 0);
}

＆＃13;

<script type="text/javascript" src="//code.jquery.com/jquery-3.1.0.js"></script>

＆＃13;

＆＃13;

＆＃13;

关于图像的问题 - 由于加载文档时图像已经在缓存中，因此window.onload函数在 {{1}之前似乎只被称为 （它是一个竞争条件），但如果你确保图像永远不会缓存 - 你会看到你得到的结果与jquery2和jquery3完全相同。

jQuery 2

＆＃13;

＆＃13;

document.ready

＆＃13;

$(document).ready(function(){
  console.log('jquery - DOM loaded');
});

window.onload = function(){
  console.log('window - loaded');
}

＆＃13;

＆＃13;

＆＃13;

jQuery 3

＆＃13;

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>
  for (i = 0; i < 6; i++) {
    
    document.writeln('<img src="https://o.aolcdn.com/commerce/autodata/images/USC60LGC051A021001.jpg?'+ parseInt(Math.random()*10000) +'" alt="">');
  }
</script>

＆＃13;

$(document).ready(function(){
  console.log('jquery - DOM loaded');
});

window.onload = function(){
  console.log('window - loaded');
}

＆＃13;

＆＃13;

＆＃13;