Diferença entre DOMContentLoaded e load – eventos de DOM

Neste artigo você vai aprender qual a diferença entre DOMContentLoaded e load, eventos de DOM que são executados no carregamento da página

Fala programador(a), beleza? Bora aprender mais sobre eventos de DOM!

Tanto DOMContentLoaded como load são eventos que disparam ao carregar a página

A diferença está no momento em que eles são executados, pois as páginas carregam em diversas etapas

Quando o DOMContentLoaded é executado?

O evento DOMContentLoaded é executado assim que a hierarquia de DOM é construída

Ou seja, não aguarda o carregamento de imagens ou arquivos de CSS

Porém note que se uma tag de link, que carrega um arquivo CSS, estiver antes da tag script

O evento DOMContentLoaded espera a folha de estilos carregar, pois os estilos bloqueiam a execução de scripts

Quando o evento load executa?

Já o load espera a página estar completamente carregada

Estamos falando então da espera do HTML, CSS e imagens

Depois disso temos a execução deste evento, ele fica por último

Na maioria dos casos, estamos esperando apenas o DOM ser construído

Então a opção mais escolhida provavelmente será DOMContentLoaded

Mas cabe o teste, utilize os dois no seu projeto e veja qual atende melhor a sua necessidade

Deixe um comentário contando o que achou deste artigo 🙂

Quer aprender mais sobre JavaScript? Confira o vídeo abaixo:

Conclusão

Neste artigo você aprendeu a diferença entre DOMContentLoaded e load

Explicando rapidamente: o DOMContentLoaded é executado após a construção do DOM

Já o load aguarda o carregamento total de CSS e imagens da página

Deseja programar de forma profissional? Confira o nosso treinamento completo clicando aqui.

Uma plataforma de cursos com projetos completos, comunidade de alunos e muito mais!

Há também o nosso canal no YouTube, com muito conteúdo gratuito de qualidade!

DOMContentLoaded x load: a diferença em uma olhada

Se tu tá com pressa, é isso aqui:

DOMContentLoaded: dispara assim que o HTML é lido e a hierarquia do DOM está montada, sem esperar imagem

load: dispara só quando a página inteira terminou de carregar, imagens incluídas

Ou seja: o DOMContentLoaded vem primeiro, o load fecha a fila

Uma analogia pra fixar: o DOMContentLoaded é a casa com as paredes de pé, tu já consegue andar por ela e mexer nos cômodos

Já o load é a casa com os móveis, os quadros e a decoração toda no lugar 🙂

O resto do artigo é essa mesma ideia destrinchada, beleza?

Por que o DOMContentLoaded às vezes demora mais do que você espera?

Esse é o ponto que pega muita gente de surpresa

Se a tag de link do CSS vem antes da tag script, o navegador segura a execução daquele script até a folha de estilos chegar

E aí o DOMContentLoaded acaba esperando o CSS junto, mesmo sem imagem nenhuma no meio

Não é bug, é a ordem das coisas

Se liga nisso quando bater aquela sensação de ‘mas eu nem tô carregando imagem, por que tá lento?’

Qual dos dois usar em cada caso?

Antes do como, o porquê

Tu escolhe o evento respondendo uma pergunta só: o que o meu script precisa que já esteja pronto pra funcionar?

Se ele só precisa encontrar os elementos da página pra colocar um clique, trocar um texto, montar uma lista, o DOMContentLoaded resolve

Ele não fica esperando imagem, então tua interação fica disponível mais cedo pro usuário

Agora, se o teu código depende do resultado final da página, tipo algo que só faz sentido depois que as imagens já ocuparam o espaço delas na tela, aí o load é o cara

Tome cuidado! Rodar script antes do DOM existir é o clássico ‘meu elemento tá nulo e eu não sei por quê’

O elemento não sumiu, ele só ainda não tinha nascido na hora em que teu código foi procurar 😛

E nada impede de usar os dois na mesma página, cada um cuidando de uma parte

Perguntas frequentes sobre DOMContentLoaded e load

Qual evento dispara primeiro, DOMContentLoaded ou load?

O DOMContentLoaded vem primeiro

Ele dispara quando a hierarquia do DOM termina de ser construída, enquanto o load fica pro final, quando a página inteira já carregou

O DOMContentLoaded espera as imagens carregarem?

Não

Imagem não segura o DOMContentLoaded, ele olha pra estrutura do documento e dispara

Quem espera imagem é o load

Então o load é o evento ruim?

Nada disso, ele só é outro momento da linha do tempo

Existe código que precisa mesmo da página inteira pronta, e nesse caso o load é o certo

Dá pra usar DOMContentLoaded e load na mesma página?

Dá sim, e é bem comum

Um cuida do que depende só da estrutura, o outro do que depende da página completa

Faça o teste no teu projeto e vê qual atende melhor cada pedaço 🙂