Olá pessoal,
Resolvi escrever este pequeno post para explicar a diferença entre dois (famosos) eventos que são disparados quando uma página é carregada, são eles:
- DOMContentLoaded;
- load
Estes eventos são muito importantes e devemos saber a real diferença entre eles, assim usaremos cada um deles de maneira apropriada
DOMContentLoaded
Também conhecido em JQuery como: $(document).ready
Este evento é disparado quando o documento HTML é carregado e parseado (analisado), neste momento o DOM (Document Object Model) é construído e esta pronto para ser acessado.
Não há a necessidade de esperarmos todo o resto da página ser carregado para acessarmos a estrutura de objetos e fazermos manipulações .
Load
Também conhecido em JQuery como: $(window).load
Este evento por sua vez é disparado quando TODOS os componentes da página são carregados: Imagens, CSSs, JavaScripts, Frames, Flashs e etc.
Devemos usar este evento somente quando quisermos fazer algo depois do carregamento COMPLETO da tal página.
Exemplo de DOMContentLoaded vs load
Tirei a imagem acima do FireBug uma extensão do Firefox.
Perceba duas linhas verticais uma azul e outra vermelha, que representam os eventos DOMContentLoaded e load respectivamente. No tooltip ainda conseguimos ver a quantidade de tempo que se passou até que esses eventos fossem disparados, interessante não?
Quanto mais perto uma linha da outra mais rápido sua página esta sendo carregada!
Componentes de terceiros – CUIDADO!
Sim! Botões do Facebook, coisas do Twitter e etc, tudo que for de terceiro que estiver “pindurado” em sua página vai interferir ou postergar o evento load de sua página, portanto cuidado!
O ideal nesses casos é carregar tais componentes de modo assíncrono, mas isso é assunto para um próximo post.
Espero ter contribuído de alguma forma
Abraços!