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!