onload do JavaScript

Resumo: neste tutorial, você aprenderá como lidar com o evento de carregamento que dispara nos elementos de documento, imagem e script em JavaScript.

O evento de carregamento da janela

Para o objeto window, o evento load é disparado quando o toda a página da web (HTML) foi totalmente carregada, incluindo todos os recursos dependentes, como arquivos JavaScript, arquivos CSS e imagens.

Para lidar com o evento load, você se registra um ouvinte de eventos usando o método addEventListener():

Code language: JavaScript (javascript)

Ou usando onload propriedade do objeto window:

Code language: JavaScript (javascript)

Se você mantém um sistema legado, pode descobrir que o load manipulador de eventos é registrado no elemento do corpo do documento HTML, como este:

É uma boa prática usar o addEventListener() método para atribuir o onload manipulador de eventos sempre que possível.

O evento de carregamento da imagem

O load também ocorre nas imagens. Para lidar com o evento load nas imagens, você pode usar o addEventListener() método dos elementos da imagem.

O o exemplo a seguir usa o manipulador de eventos load para determinar se uma imagem, que existe na árvore DOM, foi completamente carregada:

Você pode atribuir um onload manipulador de eventos diretamente usando o atributo onload do elemento <img>, como este:

Code language: HTML, XML (xml)

Se você criar um elemento de imagem dinamicamente, poderá atribuir um onload manipulador de eventos antes de definir o src propriedade da seguinte forma:

Como funciona:

  • Primeiro, crie um elemento de imagem após o documento ter sido totalmente carregado, colocando o código dentro do manipulador de eventos do evento de carregamento da janela.
  • Em segundo lugar, atribua o onload manipulador de eventos à imagem.
  • Terceiro, adicione a imagem ao documento.
  • Finalmente, atribua um URL de imagem ao atributo src. A imagem será baixada para o elemento assim que a propriedade src for definida.

O evento de carregamento do script

O <script> elemento também suporta o evento load um pouco diferente das formas padrão.

O evento load do script permite que você para verificar se um arquivo JavaScript foi completamente carregado.

Ao contrário das imagens, o navegador da web começa a baixar arquivos JavaScript somente depois que a propriedade src foi atribuída e o <script> elemento foi adicionado ao documento.

O código a seguir carrega o arquivo app.js após a página ter sido completamente carregado. Ele atribui um onload manipulador de eventos para verificar se app.js foi totalmente carregado.

Resumo

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios marcados com *