Quais são as diferenças entre os métodos JavaScript's window.onload
e jQuery's $(document).ready()
?
O evento ready' ocorre após o documento HTML ter sido 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 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.
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:
window.onload
(que é implementado mesmo em browsers antigos), que dispara quando a página inteira carrega (imagens, estilos, etc.)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)