O evento ready
é disparado depois que o documento HTML foi carregado.
O onload
só é disparado quando todo o conteúdo é carregado (incluindo imagens, vídeos, etc).
Repare que o ready
é específico do jQuery. Isto é, ele não existe "nativamente". A intenção dele é executar algo o mais rápido possível depois de carregar o documento, sem precisar esperar todo o conteúdo ser carregado.
Exemplo do document.ready
usando uma imagem pesada
$(document).ready(function(){
console.log('Ready disparado');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Meu conteúdo</div>
<img src="http://joumxyzptlk.de/pics/normal/unigine/Unigine%20Valley%2010k%20(10240x5760)%20-%20000.jpg" />
Exemplo do onload
window.onload = function(){
console.log('Onload disparado');
}
<div>Meu conteúdo</div>
<img src="http://joumxyzptlk.de/pics/normal/unigine/Unigine%20Valley%2010k%20(10240x5760)%20-%20000.jpg" />
O evento DOMContentLoaded
tem a mesma intenção do ready
.
Ex.:
document.addEventListener("DOMContentLoaded", function(event) {
console.log("DOM completamente carregado e analisado");
});
for(var i=0; i< 1000000000; i++)
{}
<div>Meu conteúdo</div>