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 windowobjeto, o loadevento é 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 loadevento, 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 onloadpropriedade do windowobjeto:
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 loadmanipulador 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 onloadmanipulador de eventos sempre que possível.
O evento de carregamento da imagem
O loadevento também dispara em imagens. Para tratar o loadevento nas imagens, você usa o addEventListener()método dos elementos da imagem.
O exemplo a seguir usa o loadmanipulador 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 onloadmanipulador de eventos diretamente usando o onloadatributo 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 onloadmanipulador de eventos antes de definir a srcpropriedade 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
onloadmanipulador de eventos à imagem. - Terceiro, adicione a imagem ao documento.
- Por fim, atribua um URL de imagem ao
srcatributo. A imagem será baixada para o elemento assim que asrcpropriedade for definida.
O evento de carregamento do script
O <script>elemento também suporta o loadevento de forma ligeiramente diferente das formas padrão. O loadevento 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 srcpropriedade ter sido atribuída e o <script>elemento ter sido adicionado ao documento.
O código a seguir carrega o app.jsarquivo depois que a página foi completamente carregada. Ele atribui um onloadmanipulador de eventos para verificar se app.jsfoi 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
loadevento 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 oloadevento. - Use o
addEventListener()método para registrar umonloadmanipulador de eventos.
