Diferença de window.onload e document.onload em JavaScript

Neste artigo você vai aprender qual a diferença de window.onload e document.onload em JavaScript, de uma maneira simples

Fala programador(a), beleza? Bora aprender mais sobre os onloads de JavaScript!

Apesar da semelhança temos diferenças cruciais entre os dois métodos

Primeiramente vejamos o window.onload, que é uma função carregada após diversos elementos terem sido carregados

Ele via esperar a página toda finalizar o carregamento e também os conteúdos dela, ou seja: HTML, CSS, scripts e até imagens

Desta maneira, se você precisa esperar o máximo de tempo possível é uma boa escolha

Agora o document.onload: este é carregado quando o DOM encerra seu carregamento

Ou seja, logo após o HTML estar pronto, temos o disparo do método document.onload

Então temos que este não espera imagens e nem scripts externos serem carregados

Sendo uma opção interessante quando precisamos esperar apenas o HTML para poder fazer interações nos seus elementos

E em algumas navegadores o document.onload está sendo substituído pelo window.onload, ou seja, temos só a opção do window disponível

Em uma perspectiva de compatibilidade com diversos navegadores é interessante optar pelo window.onload, pelo motivo apontado acima

Note também a questão da compatibilidade, onde alguns navegadores estão deixando de suportar o document, e isso pode quebrar sua aplicação

Conclusão

Neste artigo você aprendeu a diferença de window.onload e document.onload em JS

Vimos que o método que começa com o window espera mais elementos para ser disparado

Já o document vai ser inicializado assim que o DOM estiver pronto na nossa página

Confira nossos cursos gratuitos no Youtube, com vídeos todos os dias!

Se inscreva e ative o sininho para receber as notificações e aprender mais ainda sobre desenvolvimento web!

Veja também nosso catálogo de cursos na Udemy, todos com exercícios e projetos práticos, nas mais diversas tecnologias

O link acima contém um cupom de desconto para os cursos!