Como executar uma função ao carregar a página com JavaScript

Neste artigo você aprenderá a como executar uma função ao carregar a página com JavaScript, utilizando um evento da linguagem!

Fala programador(a), beleza? Bora aprender mais sobre eventos e funções em JavaScript!

Para resolver nosso problema temos duas abordagens:

• Utilizando o objeto window;
• Utilizando um evento de DOM;

Em window temos uma propriedade que pode executar uma função no carregamento, que é a onload

Já o evento vamos executar em document, e o nome dele é DOMContentLoaded

Veja primeiramente abordagem com window:

window.onload = function() {
  
  // Sua função aqui
  
};

Já através do DOM, utilize a seguinte abordagem:

document.addEventListener("DOMContentLoaded", function() {
  
  // Sua função aqui

});

Onde temos o comentário, você vai colocar o nome da sua função e executar

Simples assim, basta escolher o que precisa rodar dentro das funções anônimas das duas abordagens que foram colocadas aqui neste artigo

Ambas tem os mesmos resultados, porém a segunda acaba sendo mais correta, pois é o padrão dos eventos de JavaScript

Deixe um comentário contando o que achou desta solução 🙂

Quer aprender mais sobre JavaScript? Confira o vídeo abaixo:

Conclusão

No artigo de hoje você aprendeu a como executar uma função ao carregar a página

Utilizamos duas abordagens, a primeira foi com o objeto global window

Onde utilizamos a sua propriedade onload, e podemos executar algo

E a segunda foi com um evento de DOM em document

O nome do evento é DOMContentLoaded, e é executado justamente quando a página é iniciada

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!

window.onload ou DOMContentLoaded: qual usar?

Os dois disparam uma função quando a página carrega, mas em MOMENTOS diferentes, e é aí que mora a diferença

O DOMContentLoaded dispara assim que o HTML é montado, ou seja, quando a estrutura da página (o DOM) está pronta pra ser manipulada

Ele não espera imagem, vídeo, folha de estilo ou nada externo terminar de baixar

Já o window.onload é o mais paciente: só roda depois que TUDO carregou, incluindo as imagens e os recursos externos

Na prática:

se tu só precisa mexer nos elementos da página (pegar um botão, um input, montar algo na tela), vai de DOMContentLoaded, ele dispara mais cedo e deixa a página responder mais rápido

se tua função depende do tamanho real de uma imagem já carregada, ou de algum recurso externo estar 100% pronto, aí o window.onload faz sentido

Por isso o DOMContentLoaded acaba sendo a escolha padrão no dia a dia =)

E se eu já tenho uma função pronta?

Nos exemplos acima usamos função anônima (aquela sem nome, escrita ali dentro na hora)

Mas e se tu já tem a tua função declarada em outro lugar e só quer que ela rode no carregamento?

Simples, é só passar o NOME dela, sem os parênteses:

function iniciar() {

// seu código aqui

}

document.addEventListener(‘DOMContentLoaded’, iniciar);

Repara que é iniciar e não iniciar()

Se tu botar os parênteses, o JavaScript executa a função na hora da leitura do código, e não quando a página carregar

Já me ferrei uma vez por causa disso, então se liga!

Dá pra rodar mais de uma função no carregamento?

Dá sim, e isso é uma vantagem do addEventListener

Tu pode registrar o DOMContentLoaded várias vezes que todos os blocos vão rodar, um atrás do outro:

document.addEventListener(‘DOMContentLoaded’, function() {

// primeira coisa

});

document.addEventListener(‘DOMContentLoaded’, function() {

// segunda coisa

});

Com o window.onload isso não rola do mesmo jeito: se tu atribuir onload duas vezes, a segunda SOBRESCREVE a primeira e só a última roda

Mais um motivo pra ter o DOMContentLoaded como padrão =)