Como executar uma função quando a página é carregada em JavaScript?

Para executar uma função JavaScript quando uma página da web está completamente carregada é bastante fácil. Existem várias maneiras de realizar esta tarefa, algumas das quais incluem adicionar linhas nas tags de elemento HTML, e outras incluem o uso de funções DOM e variáveis ​​de estado em nosso script snippet.

Este artigo usará os seguintes métodos para realizar a tarefa em questão:

• Usando o evento OnLoad na variável da interface do Windows
• Colocando um atributo onload dentro da tag
• Definindo um ouvinte de evento personalizado na variável da interface da janela
• Usando o documento.atributo onreadyStateChange

Vamos começar com o primeiro.

Método 1: Evento de Onload de Janela

O evento OnLoad () pode ser usado com qualquer elemento de uma página HTML e executará as ações dadas dentro dele depois que esse elemento foi totalmente carregado. Para executar uma função somente após o todo “janela”Foi carregado, use a“ janela.Propriedade OnLoad ”no arquivo de script e defina -a igual a uma função como

janela.OnLoad = function ()
alerta ("página foi carregada");
;

Na função, está sendo enviado um alerta que diz “a página foi carregada”. Execute a página da Web HTML e observe os seguintes resultados:

Está claro na saída que a função foi executada após o navegador totalmente carregado a “janela” da página da web.

Método 2: Usando o atributo onload com a tag corporal

Como a etiqueta corporal inclui todos os dados exibidos no navegador da web, portanto, colocando um atributo onload e configurando -os iguais a uma função nessa tag, essencialmente significa executar a função depois que tudo na página da web foi totalmente carregado.

Por exemplo, crie uma página da Web HTML com estas linhas:

alt = ""
/>

Como executar uma função quando a página é carregada em JavaScript ?

Este é um exemplo de atributo de Onload do corpo

O ponto -chave aqui é que no corpo usamos o atributo OnLoad = “totalmente carregado ()”. Isso fará com que a página da web procure um “totalmente carregado()”A função no script depois que todos os elementos dentro das páginas da web foram carregados.

Vá para dentro do arquivo de script e adicione as seguintes linhas:

função totalmente carregada ()
alerta ("A página da web foi completamente carregada!");

Execute o HTML e a saída no navegador ficará assim:

O usuário é solicitado após a etiqueta do corpo, e todos os elementos dentro da etiqueta corporal foram totalmente carregados.

Método 3: Adicionando um ouvinte de evento na variável de interface "janela"

Um dos métodos mais antigos ainda eficaz. No arquivo JavaScript, basta adicionar um ouvinte de evento usando o operador DOT com nosso “janela”Variável de interface. O estado dentro do ouvinte do evento será “carregar”E nessa mudança de estado, defina uma função a ser executada. Tudo isso é alcançado usando as seguintes linhas:

janela.addEventListener ("load", function ()
alerta ("está carregado!");
);

Depois disso, basta carregar a página da web html no navegador e observar a seguinte saída:

O usuário é solicitado assim que a janela estiver totalmente carregada. No entanto, observe que este alerta aparece quando o “janela" está carregado. Isso significa que o usuário pode receber o alerta antes que todos os elementos carreguem completamente.

Método 4: Usando o atributo OnReadyStatechange do documento,

Dom tem esse atributo chamado “ONREYSTATATECHANGE”, Que é empolgado toda vez que o estado do documento é alterado. Isso pode ser usado para executar uma função, mas o único problema é que essa variável ou atributo pode conter diferentes estados, como carregar, pendente, processamento e completo. Isso ocorre porque esse atributo é mais usado para solicitações XML ou HTML.

Uma verificação deve ser induzida para executar uma função somente quando o documento está totalmente carregado. Use as seguintes linhas dentro do arquivo JavaScript:

documento.ONREADESTATECHANGE = function ()
if (documento.ReadyState == "Complete")
Alerta ("Yahoo!");

;

No trecho de código acima, um cheque foi colocado para procurar um estado específico "completo" somente então o usuário está sendo alertado. Inicie a página da Web HTML e observe a saída:

O usuário foi alertado depois que o estado pronto do documento foi "completo".

Embrulhar

Existem algumas maneiras de executar uma função JavaScript assim que a página da web estiver completamente carregada. Para demonstrar isso, neste artigo, em todos os métodos, você usou um alerta Função para mostrar um alerta representando que a página da web executou a função JavaScript após o carregamento completo dessa página da web.