Come utilizzare l'evento di immagine onload in javascript

In JavaScript, l'immagine "Onload"L'evento si verifica quando l'immagine viene caricata correttamente su una pagina Web. Questa funzione può essere utilizzata quando dobbiamo caricare immagini sulle nostre pagine web per renderle attraenti. L'evento di immagine onload viene anche utilizzato nello sviluppo di siti Web che visualizzano le immagini, i loghi e i banner dei prodotti.

Questo articolo metterà in evidenza l'evento di immagine Onload usando JavaScript.

Come utilizzare l'immagine Onload JavaScript Evento?

È possibile utilizzare i seguenti metodi per l'esecuzione dell'operazione evento di Onload in JavaScript:

• QuerySelector ()
• Funzione definita dall'utente

Ora passeremo attraverso ciascuno degli approcci menzionati uno per uno!

Metodo 1: utilizzare l'evento di immagine onload in javascript con documento.QuerySelector ()

IL "documento.QuerySelector ()"Il metodo viene utilizzato principalmente per restituire il primo elemento che corrisponde a un particolare selettore all'interno del documento. Ad esempio, può essere utilizzato per definire un evento per accedere a un'immagine dal file HTML.

L'esempio seguente utilizzerà il documento.Metodo QuerySelector () per definire un'immagine sull'evento di carico.

Esempio

Innanzitutto, aggiungeremo la fonte dell'immagine "src"Nel file HTML:

Ora, spostati nel file JavaScript e chiama "addEventListener ()"Metodo con l'oggetto della finestra. Questo metodo verrà utilizzato per aggiungere un ascoltatore di eventi per caricare l'immagine desiderata con l'aiuto di "documento.QuerySelector ()" metodo. Successivamente, aggiungi un avviso pop-up con il messaggio dichiarato:

finestra.addEventListener ("Load", event =>
var img = documento.QuerySelector ('IMG');
avviso ("L'immagine viene caricata correttamente");
);

Infine, specificare la fonte del file JavaScript nel tag testa o corpo:

L'apertura del file HTML fornito mostrerà il seguente output:

Dopo aver caricato l'immagine selezionata, la seguente casella di avviso verrà visualizzata anche con un messaggio:

Metodo 2: utilizzare l'evento di immagine onload in javascript con funzione definita dall'utente

Una funzione definita dall'utente può essere utilizzata anche per l'immagine sul processo di caricamento, a cui si accede in "Html"File tramite"Onload". Questa funzione restituirà lo stato dell'immagine in una casella di avviso.

Dai un'occhiata al seguente esempio per comprendere il concetto dichiarato.

Esempio

Innanzitutto, definiremo un "ImageOnload ()"Funzionare e mostrare lo stato dell'immagine da caricare tramite la casella di avviso:

funzione imageonload ()
avviso ("L'immagine viene caricata correttamente");

Successivamente, aggiungeremo il percorso dell'immagine che deve essere scaricato e chiamato il definito "ImageOnload ()"Funzione come"Onload"Evento. Inoltre, specificheremo anche l'origine del file JavaScript nel file HTML:

lt; img src = "e: \ articoli tecnici \ immagine.Png "onload =" imageonload () ">

Produzione

Abbiamo fornito metodi diversi per utilizzare l'evento Onload Immagine in JavaScript.

Conclusione

Per utilizzare l'evento di immagine Onload in JavaScript, è possibile utilizzare il documento.Metodo QuerySelector () o funzione definita dall'utente. Nel primo approccio, il metodo AddeventListener () viene chiamato con l'oggetto finestra utilizzato per aggiungere un ascoltatore di eventi al documento.Metodo QuerySelector (). Per il secondo approccio, è possibile creare un oggetto definito dall'utente, a cui si accede nel file HTML tramite evento Onload. Questo articolo ha discusso del metodo per utilizzare un evento JavaScript Onload.