Como usar o evento Onload de imagem em JavaScript

Em JavaScript, a imagem “carregando”O evento ocorre quando a imagem é carregada com sucesso em uma página da web. Esse recurso pode ser utilizado quando precisamos carregar imagens em nossas páginas da web para torná -las atraentes. O evento Onload de imagem também é usado no desenvolvimento de sites que exibem as imagens, logotipos e banners dos produtos.

Este artigo destacará o evento Onload da imagem usando JavaScript.

Como usar o evento JavaScript ONLOAD de imagem?

Você pode utilizar os seguintes métodos para executar a operação de eventos de Onload de imagem em JavaScript:

• QuerySelector ()
• Função definida pelo usuário

Vamos agora passar por cada uma das abordagens mencionadas uma a uma!

Método 1: Use o evento Onload de imagem em JavaScript com documento.QuerySelector ()

O "documento.QuerySelector ()”O método é usado principalmente para retornar o primeiro elemento que corresponde a um seletor específico dentro do documento. Por exemplo, ele pode ser utilizado para definir um evento para acessar uma imagem do arquivo html.

O exemplo abaixo do ritmo usará o documento.Método querySelector () para definir uma imagem no evento de carga.

Exemplo

Primeiro, adicionaremos a fonte da imagem “src”No arquivo HTML:

Agora, vá para o arquivo JavaScript e ligue para o “addEventListener ()”Método com o objeto de janela. Este método será usado para adicionar um ouvinte de evento para carregar a imagem desejada com a ajuda do “documento.QuerySelector ()”Método. Depois disso, adicione um alerta pop-up com a mensagem declarada:

janela.addEventListener ("load", evento =>
var iMg = documento.QuerySelector ('img');
alerta ("A imagem é carregada com sucesso");
);

Por fim, especifique a fonte do arquivo JavaScript na tag da cabeça ou do corpo:

A abertura do arquivo HTML fornecido mostrará a seguinte saída:

Depois de carregar a imagem selecionada, a seguinte caixa de alerta também aparecerá com uma mensagem:

Método 2: Use o evento Onload de imagem em JavaScript com função definida pelo usuário

Uma função definida pelo usuário também pode ser utilizada para a imagem no processo de carregamento, que é acessado em “Html"Arquivo via"carregando”. Esta função retornará o status da imagem em uma caixa de alerta.

Confira o exemplo a seguir para entender o conceito declarado.

Exemplo

Primeiro, vamos definir um “ImageOnLoad ()”Função e mostre o status da imagem a ser carregada via caixa de alerta:

function imageOnload ()
alerta ("A imagem é carregada com sucesso");

Em seguida, adicionaremos o caminho da imagem que precisa ser baixada e chamar o definido "ImageOnLoad ()" funciona como "carregandoEvento. Além disso, também especificaremos a fonte do arquivo JavaScript no arquivo HTML:

lt; img src = "e: \ artigos técnicos de trabalho \ imagem.Png "onLload =" imageOnLoad () ">

Saída

Fornecemos métodos diferentes para usar o evento Onload de imagem em JavaScript.

Conclusão

Para usar o evento Onload de imagem em JavaScript, você pode usar o documento.método de queryselector () ou função definida pelo usuário. Na primeira abordagem, o método addEventListener () é chamado com o objeto de janela usado para adicionar um ouvinte de evento ao documento.Método querySelector (). Para a segunda abordagem, um objeto definido pelo usuário pode ser criado, que é acessado no arquivo HTML via evento Onload. Este artigo discutiu o método para usar um evento JavaScript Onload.