58

Existe diferença entre $(document).ready() e window.onload além de um ser JavaScript e o outro ser jQuery?

Vejo que ambos os eventos são disparados assim que o DOM (Modelo de Objetos do Documento) é carregado.

Na prática como são escritos:

$(document).ready(function() {

});


window.onload = function() {

};
2

2 Respostas 2

79

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>

0
14

O evento ready ocorre depois que o documento HTML foi carregado, enquanto o evento onload ocorre mais tarde, quando todo o conteúdo (por exemplo, imagens) também foi carregado.

O evento onload é um evento padrão no DOM, enquanto o evento ready é específico para jQuery. O objetivo do evento ready é que ele deve ocorrer o mais cedo possível após o documento ser carregado, para que o código que adiciona a funcionalidade para os elementos na página não precisar esperar todo o conteúdo para carregar.

Fonte

0

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .