javascript – window.load&$(document).ready()与jQuery版本2和3的行为不同

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

https://jsfiddle.net/23rupa07/

我读到的是当加载DOM并且window.load正在等待直到例如加载图像时,立即触发$(document).ready().

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

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

解决方法:

记录jQuery2和jQuery3之间的变化

jQuery 3的一个变化是截至目前 – 文档就绪处理程序是异步的,即使文档在添加处理程序的当前就绪.这提供了一致的代码执行顺序,该顺序与文档是否准备就绪无关.

此更改需要为文档就绪回调实现队列功能,这也会影响对未从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中看到的行为与文档就绪回调的“fire”事件和window.onload函数之间的竞争条件有关.

这段代码可以显示两个函数“同时”运行,而这只是浏览器VM内部代码执行的问题：

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

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

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

关于图像的问题 – 因为当你加载文档时图像已经在你的缓存中,它似乎只是在document.ready之前调用window.onload函数(这是一个竞争条件),但是如果你确定图像永远不会缓存 – 您将看到jquery2和jquery3的结果完全相同.

jQuery 2

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

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

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

jQuery 3

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/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>