Equivalente a $(document).ready em JavaScript puro

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