window.onload vs $(document).ready()

Quais são as diferenças entre os métodos JavaScript's window.onload e jQuery's $(document).ready()?

Brian Tompsett - 汤莱恩
Pergunta editada :em
Programação
javascript jquery dom-events unobtrusive-javascript
13º setembro 2010 в 6:24
14 vistas
Solução

O evento ready' ocorre após o documento HTML ter sido carregado, enquanto o eventoonload' 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 ocorra o mais cedo possível após o carregamento do documento, para que o código que adiciona funcionalidade aos elementos da página não tenha que esperar que todo o conteúdo seja carregado.

user664833
Resposta editada :em
Comentários (12)

window.onload" é o evento JavaScript embutido, mas como sua implementação teve subtle peculiaridades nos navegadores (Firefox, Internet Explorer 6, Internet Explorer 8, e Opera), jQuery fornece `document.ready', que abstrai aqueles que estão longe, e dispara assim que o DOM da página estiver pronto (não espera por imagens, etc.).

$(document).ready (note que é not document.ready, que é indefinido) é uma função jQuery, embrulhando e fornecendo consistência para os seguintes eventos:

  • document.ondomcontentready" / `document.ondomcontentloaded' - um evento novo que dispara quando o DOM do documento é carregado (que pode ser algum tempo antes de as imagens, etc. serem carregadas); novamente, ligeiramente diferente na Internet Explorer e no resto do mundo
  • e window.onload (que é implementado mesmo em browsers antigos), que dispara quando a página inteira carrega (imagens, estilos, etc.)
Peter Mortensen
Resposta editada :em
Comentários (8)

Uma palavra de cuidado ao utilizar $(document).ready() com o Internet Explorer. Se uma solicitação HTTP for interrompida antes o documento inteiro é carregado (por exemplo, enquanto uma página é transmitida para o navegador, outro link é clicado) o IE acionará o evento `$(document).ready'.

Se qualquer código dentro do $(document).ready() evento referencia objetos DOM, o potencial existe para que esses objetos não sejam encontrados, e erros de Javascript podem ocorrer. Guarde suas referências a esses objetos, ou deferir o código que faz referência a esses objetos para o evento window.load.

Não fui capaz de reproduzir este problema em outros navegadores (especificamente, Chrome e Firefox)

khr055
Resposta editada :em
Comentários (3)