Window.load & $ (document) .ready () behaves differently with jQuery versions 2 and 3

Question

in this small project I tried to play with window.loadand$(document).ready()

https://jsfiddle.net/23rupa07/

What I read is that it $(document).ready()starts immediately upon loading the DOM and window.loadwaits until, for example, the images are loaded.

For jQuery version 2.2.4, it works as above, but when I change jQuery to version 3.1.0, the order returns.

Check out the screenshot. Does anyone know why?

Answer 1

document change between jQuery2 and jQuery3

jQuery 3 , - , , , . , , [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, "" window.onload.

, "", :

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

- , , window.onload document.ready ( ), , - , 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>