O conceito de carregamento HTML/JS pode ajudá-lo a controlar o comportamento da página da Web depois de carregada.

O carregamento de uma página da Web inclui aguardar o carregamento completo do conteúdo, das imagens e de outros recursos da página.

Algumas páginas da Web garantem que determinadas funcionalidades não ocorram até que tudo tenha sido carregado. Um exemplo inclui a recuperação de dados de um banco de dados somente após o carregamento da página.

Existem diferentes maneiras de verificar se uma página da Web está totalmente carregada. Você pode ouvir eventos usando manipuladores de eventos JavaScript, use o window.onload evento JavaScript ou o carregando Atributo HTML.

Como usar onLoad com o elemento HTML do corpo

Você pode usar eventos JavaScript para verificar se o corpo da página da Web foi carregado. Você precisará de um arquivo HTML com algum conteúdo da página e um arquivo JavaScript para executar o código.

O código utilizado neste projeto está disponível em um Repositório GitHub e é gratuito para você usar sob a licença do MIT.

instagram viewer
  1. Em um novo arquivo HTML chamado index.html, adicione o seguinte código HTML básico:
    html>
    <html>
    <cabeça>
    <título>Exemplo usando onloadtítulo>
    cabeça>
    <corpo>
    <h1>Exemplo usando onload()h1>
    <p>Este exemplo demonstra como usar o evento onload() em JavaScript.p>
    corpo>
    html>
  2. Crie um novo arquivo na mesma pasta chamada script.js. Vincule este arquivo à sua página HTML usando a tag script. Você pode adicionar a tag script na parte inferior da tag body:
    <corpo>
     seu conteúdo 
    <roteiroorigem="script.js">roteiro>
    corpo>
  3. Dentro do conteúdo em sua tag de corpo HTML, adicione uma tag de parágrafo vazia.
    <peu ia="saída">p>
  4. Dentro do arquivo JavaScript, adicione o window.onload função de evento. Isso será executado quando a página for carregada:
    janela.onload = função() {
    // código a ser executado quando a página é carregada
    };
  5. Dentro da função, preencha o conteúdo da tag de parágrafo vazia. Isso mudará a tag de parágrafo para exibir uma mensagem somente quando a página for carregada:
    documento.getElementById("saída").innerHTML = "Página carregada!";
  6. Alternativamente, você também pode usar um ouvinte de evento para ouvir o DOMContentLoaded evento. DOMContentLoaded dispara antes de window.onload. Ele é acionado assim que o documento HTML está pronto, em vez de aguardar o carregamento de todos os recursos externos.
    documento.addEventListener('DOMContentLoaded', função() {
    documento.getElementById("saída").innerHTML = "Página carregada!";
    });
  7. Abra o arquivo index.html em um navegador da Web para visualizar a mensagem quando a página terminar de carregar:
  8. Em vez de usar eventos JavaScript para verificar se uma página foi carregada, você também pode usar o carregando Atributo HTML para o mesmo resultado. Adicione o atributo onload à tag body em seu arquivo HTML:
    <corpocarregando="iniciar()">
  9. Crie o iniciar() dentro do arquivo JavaScript. Não é recomendado usar o atributo onload HTML e o evento onload JavaScript ao mesmo tempo. Fazer isso pode levar a um comportamento inesperado ou a conflitos entre as duas funções.
    funçãoiniciar() {
    documento.getElementById("saída").innerHTML = "Página carregada!";
    }

Recomendamos usar os ouvintes de evento JavaScript e o window.onload método sobre o HTML carregando porque manter o comportamento e o conteúdo da página da Web separados é uma boa prática. Além disso, os ouvintes de evento JavaScript fornecem mais compatibilidade e flexibilidade em relação aos outros dois métodos.

Como usar onLoad com o elemento HTML Image

Você também pode usar o evento onload para executar o código quando outros elementos forem carregados na página. Um exemplo disso é o elemento imagem.

  1. Dentro da mesma pasta do arquivo index.html, adicione qualquer imagem.
  2. Dentro do arquivo HTML, adicione uma tag de imagem e vincule o atributo src ao nome da imagem salva na pasta.
    <imgeu ia="minha imagem"origem="Pidgeymon.png"largura="300">
  3. Adicione outra tag de parágrafo vazia para exibir uma mensagem quando a imagem for carregada:
    <peu ia="imageLoadedMessage">p>
  4. Dentro do arquivo JavaScript, adicione um evento onload na imagem. Use o ID exclusivo minha imagem para determinar a qual elemento de imagem adicionar o evento onload:
    var minhaimagem = documento.getElementById("minha imagem");
    minhaImagem.onload = função() {

    };
  5. Dentro do evento onload, altere o HTML interno para adicionar o Imagem carregada mensagem:
    documento.getElementById("imageLoadedMessage").innerHTML = "Imagem carregada!";
  6. Ao invés de usar minhaimagem.onload, você também pode usar um ouvinte de evento para ouvir o carregar Evento JavaScript:
    myImage.addEventListener('carregar', função() {
    documento.getElementById("imageLoadedMessage").innerHTML = "Imagem carregada!";
    });
  7. Abra index.html em um navegador da Web para visualizar a imagem e a mensagem:
  8. Para obter o mesmo resultado, você também pode usar o atributo HTML onload. Semelhante à tag body, adicione um atributo onload à tag img:
    <imgeu ia="minha imagem"origem="Pidgeymon.png"largura="300"carregando="imagem carregada ()">
  9. Adicione a função no arquivo JavaScript, para executar o código quando a imagem for carregada:
    funçãoimagem carregada() {
    documento.getElementById("imageLoadedMessage").innerHTML = "Imagem carregada!";
    }

Como usar onLoad ao carregar o JavaScript

Você pode usar o atributo HTML onload para verificar se o navegador terminou de carregar o arquivo JavaScript. Não há evento onload de JavaScript equivalente para a tag de script.

  1. Adicione o atributo onload à tag de script em seu arquivo HTML.
    <roteiroorigem="script.js"carregando="LoadedJs()">roteiro>
  2. Adicione a função ao seu arquivo JavaScript. Imprimir uma mensagem por logando no console do navegador:
    funçãoLoadedJs() {
    console.registro("JS carregado pelo navegador!");
    }
  3. Abra o arquivo index.html no navegador. Você pode use o Chrome DevTools para visualizar qualquer saída de mensagens no console.

Carregando páginas da Web no navegador

Agora você pode usar funções e eventos para executar determinado código quando uma página da Web tiver concluído o carregamento. As páginas de carregamento são um grande fator na criação de uma experiência de usuário suave e contínua.

Você pode aprender mais sobre como integrar designs de página de carregamento mais interessantes em seu site.