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

Diferença entre DOMContentLoaded e load capa

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!

Inscrever-se
Notificar de
guest

0 Comentários
mais antigos
mais recentes Mais votado
Feedbacks embutidos
Ver todos os comentários