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

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

• 474 aulas
• 20 projetos
• 39h 27min

Conhecer formação

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!

O que é o onload no JavaScript?

Antes de comparar os dois, bora entender o porquê desse método existir

O onload é o gatilho que avisa o seu código que o carregamento terminou

Sabe quando tu escreve um script pra mexer num elemento e ele simplesmente não acha nada? Pois é

Na maioria das vezes o problema não é o código, é a PRESSA: o script rodou antes do elemento existir na página

O onload resolve isso segurando a execução até o carregamento chegar ao fim

Se você já mexeu com evento de clique, a lógica é a mesma: tu diz o que fazer e o navegador te avisa a hora certa 🙂

Qual dos dois escolher?

Resumindo o jogo:

Quer esperar TUDO ficar pronto, incluindo as imagens? o window.onload é o caminho

Quer sair correndo assim que o HTML estiver montado, sem esperar o resto? é essa a ideia por trás do document.onload

Na dúvida, pensa no que o seu código precisa tocar

Se ele mexe em tamanho, posição ou conteúdo de imagem, esperar o carregamento completo te evita dor de cabeça

Se ele só precisa dos elementos do HTML pra trocar um texto ou ligar um evento, esperar a página inteira é tempo jogado fora

Erros comuns na hora de usar o onload:

Dois perrengues clássicos aparecem sempre que o onload entra na história

O primeiro é rodar o código cedo demais e ficar caçando um elemento que ainda nem chegou na página

O segundo é o contrário: segurar TUDO esperando o carregamento completo e deixar a página parecendo travada sem necessidade

Tome cuidado com o segundo, ele não quebra nada e por isso passa batido…

Perguntas frequentes sobre window.onload e document.onload

O que é o onload no JavaScript?

É o gatilho que dispara quando o carregamento termina, servindo pra rodar o seu código só depois que os elementos já estão na página

Quando o window.onload é disparado?

Depois que a página toda finaliza o carregamento, contando HTML, CSS, scripts e também as imagens

E o document.onload, espera as imagens?

Não, a ideia dele é disparar assim que o DOM encerra o carregamento, ou seja, com o HTML pronto e sem aguardar imagens e scripts externos

Meu script não encontra o elemento, o onload resolve?

Na maioria das vezes sim, porque esse erro costuma ser questão de ordem: o código rodou antes do elemento existir