Pesquisa de site

O que é HTML/JS Onload e como funciona?

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

Carregar uma página da web inclui esperar que o conteúdo da página, imagens e outros recursos sejam completamente carregados.

Algumas páginas da Web garantem que determinadas funcionalidades não ocorram até que tudo termine de carregar. 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, usar o evento JavaScript window.onload ou o atributo HTML onload.

Como usar onLoad com o elemento HTML Body

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 usado neste projeto está disponível em um repositório GitHub e é gratuito para uso sob a licença do MIT.

  1. Em um novo arquivo HTML chamado index.html, adicione o seguinte código HTML básico:

    <!DOCTYPE html>
<html>
  <head>
    <title>Example using onload</title>
  </head>
  <body>
    <h1>Example using onload()</h1>
    <p>This example demonstrates how to use the onload() event in JavaScript.</p>
  </body>
</html>

  2. Crie um novo arquivo na mesma pasta chamado 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:

    <body>
  <!-- Your content -->
  <script src="script.js"></script>
</body>

  3. Dentro do conteúdo da tag de corpo HTML, adicione uma tag de parágrafo vazia.

    <p id="output"></p>

  4. Dentro do arquivo JavaScript, adicione a função de evento window.onload. Isso será executado quando a página for carregada:

    window.onload = function() {
  // code to run when page is loaded
};

  5. Dentro da função, preencha o conteúdo da tag de parágrafo vazia. Isso mudará a tag do parágrafo para exibir uma mensagem somente quando a página for carregada:

    document.getElementById("output").innerHTML = "Page loaded!";

  6. Como alternativa, você também pode usar um ouvinte de evento para escutar o evento DOMContentLoaded. DOMContentLoaded é acionado antes de window.onload. Ele é acionado assim que o documento HTML está pronto, em vez de aguardar o carregamento de todos os recursos externos.

    document.addEventListener('DOMContentLoaded', function() {
  document.getElementById("output").innerHTML = "Page loaded!";
});

  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 atributo HTML onload para obter o mesmo resultado. Adicione o atributo onload à tag body no seu arquivo HTML:

    <body onload="init()">

  9. Crie a função init() 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 comportamentos inesperados ou conflitos entre as duas funções.

    function init() {
  document.getElementById("output").innerHTML = "Page loaded!";
}

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

Como usar onLoad com o elemento HTML de imagem

Você também pode usar o evento onload para executar 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.

    <img id="myImage" src="Pidgeymon.png" width="300">

  3. Adicione outra tag de parágrafo vazia para exibir uma mensagem quando a imagem for carregada:

    <p id="imageLoadedMessage"></p>

  4. Dentro do arquivo JavaScript, adicione um evento onload na imagem. Use o ID exclusivo myImage para determinar a qual elemento de imagem adicionar o evento onload:

    var myImage = document.getElementById("myImage");
myImage.onload = function() {
 
};

  5. Dentro do evento onload, altere o HTML interno para adicionar a mensagem Imagem carregada:

    document.getElementById("imageLoadedMessage").innerHTML = "Image loaded!";

  6. Em vez de usar myImage.onload, você também pode usar um ouvinte de evento para ouvir o evento load JavaScript:

    myImage.addEventListener('load', function() {
  document.getElementById("imageLoadedMessage").innerHTML = "Image loaded!";
});

  7. Abra index.html em um navegador da web para visualizar a imagem e a mensagem:

  8. Para o mesmo resultado, você também pode usar o atributo HTML onload. Semelhante à tag body, adicione um atributo onload à tag img:

    <img id="myImage" src="Pidgeymon.png" width="300" onload="imageLoaded()">

  9. Adicione a função no arquivo JavaScript, para executar o código quando a imagem for carregada:

    function imageLoaded() {
  document.getElementById("imageLoadedMessage").innerHTML = "Image loaded!";
}

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 no seu arquivo HTML.

    <script src="script.js" onload="LoadedJs()"></script>

  2. Adicione a função ao seu arquivo JavaScript. Imprima uma mensagem fazendo login no console do navegador:

    function LoadedJs() {
  console.log("JS Loaded by the browser!");
}

  3. Abra o arquivo index.html no navegador. Você pode usar o Chrome DevTools para visualizar qualquer saída de mensagem no console.

Carregando páginas da Web no navegador

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

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

Artigos relacionados: