Neste artigo você vai aprender uma função equivalente a $(document).ready em JavaScript puro, ou seja, sem depender de bibliotecas como jQuery
Fala programador(a), beleza? Bora aprender mais sobre JavaScript e também carregamento de págia e DOM!
Para simular o efeito de $(document).ready com JS Vanilla podemos adicionar um evento ao DOM
Utilizaremos então document, e o método addEventListener
O evento será DOMContentLoaded, que ativa apenas quando o DOM é carregado
Ou seja, tem a mesma função da inicialização do jQuery, legal né?
Veja um exemplo prático de aplicação da solução:
document.addEventListener("DOMContentLoaded", function(e) {
// Aqui vai o seu código
});Veja que dentro do evento é incluida uma função anônima
Dentro desta função colocaremos todo o código que precisa ser executado após o carregamento de DOM
Ou seja, após disparar o evento DOMContentLoaded!
E apenas com esta linha de código atingimos o efeito da função ready
Desta maneira você não precisa se incomodar mais com desencontro de JavaScript sendo executado, mediante a necessidade de algum elemento de HTML em particular
Evitando erros que podem acontecer na execução da sua aplicação, caso os elementos não estivessem presentes, o que é um problema bem comum
Ainda mais com o desuso de jQuery, programadores apelam as vezes para o setTimeout, o que é uma má prática
Pois não sabemos as condições adversas que podem acontecer devido a internet ou processamento do computador do usuário
Conclusão
Neste artigo você aprendeu a como criar uma função equivalente a $(document).ready em JavaScript vanilla
Utilizamos um evento de DOM por meio de document e addEventListener, o evento é chamado de DOMContentLoaded
E o mesmo é disparado após o completo carregamento do DOM da página, evitando assim erros de execução de script
Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube