Como executar javascript somente após a página ter sido carregada?

Você já deve ter passado pelo impasse de ter adicionado código JS em seu projeto e por algum motivo ele não executa. Seja javascript puro ou JQuery todo mundo já passou por isso.

Nesse post vamos explorar como executar seu código js somente após o navegador ter carregado completamente. E de quebra vamos dar uma dica valiosa quando você precisa esperar um pouco para executar determinado código JS.

Vamos lá!

Utilizando DOMContentLoaded (JS Nativo)

Quando você chamar o método addEventListener passando em seu primeiro parâmetro o evento DOMContentLoaded, o mesmo irá ficar ouvindo os eventos do navegador e aguardando até que (neste caso) todo o DOM esteja analisado e carregado. Dizemos neste caso, pois, existem inúmeros eventos que podem ser utilizados, confira na documentação da MDN.

<script>
  document.addEventListener("DOMContentLoaded", function(event) {
    
    //Aqui vem o seu código fantástico
    console.log("Somente serei executado quando o navegador terminar de analisar todo o DOM");
    
  });
</script>

Fazendo o mesmo no JQuery

Em jquery o funcionamento final é o mesmo, o que muda é a sintaxe. Ela é bem mais enxuta e para quem está acostumado com JQuery bem intuitiva.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>
  $(function() {
    //Aqui vem o seu código fantástico
    console.log("Somente serei executado quando o navegador terminar de analisar todo o DOM");
});
</script>

(Bônus) E quando eu preciso esperar mais tempo?

Irão chegar momentos em que será necessário aguardar mais tempo, além do fim da análise do DOM. Já passou por isso? Deixe nos comentários sua experiência.

O caso de uso principal é quando você está utilizando alguma biblioteca de terceiros e ela faz alterações no DOM sem deixar traços ou possuí documentação escassa. Nestes casos sua única arma pode ser a função setTimeout.

A função setTimeout diz ao compilador de JS para aguardar um tempo determinado, para só então executar determinado código. Na prática, fica como abaixo. O primeiro parâmetro é uma função que será executada após o tempo definido no segundo parâmetro.

Dica: o segundo parâmetro é em ms, então 1000 ms = 1 Segundo

<script>
  document.addEventListener("DOMContentLoaded", function(event) {
    
   console.log("Somente serei executado quando o navegador terminar de analisar todo o DOM");
   setTimeout(function(){ 
     //Aqui vem o seu código fantástico
     alert("Somente serei chamado após 1 segundo"); 
   }, 1000);

    
  });
</script>

Recapitulando

E ai o que achou desta postagem, acha que precisa melhorar em algo? Não entendeu alguma parte ou encontrou algum erro? Deixe um comentário.

Referências

https://developer.mozilla.org/pt-BR/docs/Web/Events/DOMContentLoaded

https://learn.jquery.com/using-jquery-core/document-ready/

https://developers.google.com/speed/libraries#jquery

Related posts

Leave a Comment