Resumo : neste tutorial, você aprenderá como lidar com o evento load que é acionado nos elementos de documento, imagem e script em JavaScript.
O evento de carregamento da janela
Para o window
objeto, o load
evento é acionado quando toda a página da Web (HTML) é totalmente carregada, incluindo todos os recursos dependentes, incluindo arquivos JavaScript, arquivos CSS e imagens.
Para lidar com o load
evento, você registra um ouvinte de evento usando o addEventListener()
método:
window.addEventListener('load', (event) => {
console.log('The page has fully loaded');
});
Linguagem de código: JavaScript ( javascript )
Ou use a onload
propriedade do window
objeto:
window.onload = (event) => {
console.log('The page has fully loaded');
};
Linguagem de código: JavaScript ( javascript )
Se você mantiver um sistema legado, poderá descobrir que o load
manipulador de eventos está registrado no elemento body do documento HTML, assim:
<!DOCTYPE html>
<html>
<head>
<title>JS load Event Demo</title>
</head>
<body onload="console.log('Loaded!')">
</body>
</html>
Linguagem de código: HTML, XML ( xml )
É 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
evento também dispara em imagens. Para tratar o load
evento nas imagens, você usa o addEventListener()
método dos elementos da imagem.
O exemplo a seguir usa o load
manipulador de eventos para determinar se uma imagem existente na árvore DOM foi completamente carregada:
<!DOCTYPE html>
<html>
<head>
<title>Image load Event Demo</title>
</head>
<body>
<img id="logo">
<script>
let logo = document.querySelector('#logo');
logo.addEventListener('load', (event) => {
console.log('Logo has been loaded!');
});
logo.src = "logo.png";
</script>
</body>
</html>
Linguagem de código: HTML, XML ( xml )
Você pode atribuir um onload
manipulador de eventos diretamente usando o onload
atributo do <img>
elemento, assim:
<img id="logo"
src="logo.png"
onload="console.log('Logo loaded!')">
Linguagem de código: HTML, XML ( xml )
Se você criar um elemento de imagem dinamicamente, poderá atribuir um onload
manipulador de eventos antes de definir a src
propriedade da seguinte maneira:
window.addEventListener('load' () => {
let logo = document.createElement('img');
// assign and onload event handler
logo.addEventListener('load', (event) => {
console.log('The logo has been loaded');
});
// add logo to the document
document.body.appendChild(logo);
logo.src = 'logo.png';
});
Linguagem de código: JavaScript ( javascript )
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 load da janela.
- Segundo, atribua o
onload
manipulador de eventos à imagem. - Terceiro, adicione a imagem ao documento.
- Por fim, atribua um URL de imagem ao
src
atributo. A imagem será baixada para o elemento assim que asrc
propriedade for definida.
O evento de carregamento do script
O <script>
elemento também suporta o load
evento de forma ligeiramente diferente das formas padrão. O load
evento do script permite verificar se um arquivo JavaScript foi completamente carregado.
Ao contrário das imagens, o navegador da web inicia o download de arquivos JavaScript somente após a src
propriedade ter sido atribuída e o <script>
elemento ter sido adicionado ao documento.
O código a seguir carrega o app.js
arquivo depois que a página foi completamente carregada. Ele atribui um onload
manipulador de eventos para verificar se app.js
foi totalmente carregado.
window.addEventListener('load', checkJSLoaded)
function checkJSLoaded() {
// create the script element
let script = document.createElement('script');
// assign an onload event handler
script.addEventListener('load', (event) => {
console.log('app.js file has been loaded');
});
// load the script file
script.src = 'app.js';
document.body.appendChild(script);
}
Linguagem de código: JavaScript ( javascript )
Resumo
- O
load
evento ocorre quando o documento foi completamente carregado, incluindo recursos dependentes como arquivos JavaScript, arquivos CSS e imagens. - Os elementos
<img>
e<script>
também apoiam oload
evento. - Use o
addEventListener()
método para registrar umonload
manipulador de eventos.