Comment utiliser l'événement Image Onload dans JavaScript

En JavaScript, l'image "en charge»L'événement se produit lorsque l'image est chargée avec succès sur une page Web. Cette fonctionnalité peut être utilisée lorsque nous devons charger des images sur nos pages Web pour les rendre attrayants. L'événement Image Onload est également utilisé dans le développement de sites Web qui affichent les images, les logos et les bannières des produits.

Cet article mettra en surbrillance l'événement Image Onload à l'aide de JavaScript.

Comment utiliser l'image EVÉNEMENT JavaScript sur l'image?

Vous pouvez utiliser les méthodes suivantes pour effectuer l'opération d'événement d'image d'image en JavaScript:

• QuerySelector ()
• Fonction définie par l'utilisateur

Nous allons maintenant passer par chacune des approches mentionnées une par une!

Méthode 1: Utilisez l'événement Image Onload en JavaScript avec un document.QuerySelector ()

Le "document.QuerySelector ()«La méthode est principalement utilisée pour renvoyer le premier élément qui correspond à un sélecteur particulier dans le document. Par exemple, il peut être utilisé pour définir un événement pour accéder à une image à partir du fichier HTML.

L'exemple donné ci-dessous utilisera le document.Méthode QueySelector () pour définir une image sur l'événement de chargement.

Exemple

Tout d'abord, nous ajouterons la source d'image "SRC«Dans le fichier html:

Maintenant, passez au fichier JavaScript et appelez le «addEventListener ()”Méthode avec l'objet Window. Cette méthode sera utilisée pour ajouter un écouteur d'événements pour charger l'image souhaitée à l'aide du «document.QuerySelector ()" méthode. Après cela, ajoutez une alerte pop-up avec le message déclaré:

fenêtre.addEventListener ("charger", événement =>
var img = document.queySelector ('img');
alert ("l'image est chargée avec succès");
);

Enfin, spécifiez la source du fichier JavaScript dans la balise de tête ou de corps:

L'ouverture du fichier HTML donné affichera la sortie suivante:

Après avoir chargé l'image sélectionnée, le boîtier d'alerte suivant apparaîtra également avec un message:

Méthode 2: Utilisez l'événement Image Onload en JavaScript avec une fonction définie par l'utilisateur

Une fonction définie par l'utilisateur peut également être utilisée pour l'image sur le processus de chargement, qui est accessible dans «Html«Fichier via«en charge". Cette fonction renverra l'état de l'image dans une boîte d'alerte.

Consultez l'exemple suivant pour comprendre le concept déclaré.

Exemple

Tout d'abord, nous définirons un «ImageOnload ()”Fonction et affichez l'état de l'image à charger via une boîte d'alerte:

fonction ImageOnload ()
alert ("l'image est chargée avec succès");

Ensuite, nous ajouterons le chemin de l'image qui doit être téléchargé et appeler le défini "ImageOnload ()" fonctionne comme "en charge" événement. De plus, nous spécifierons également la source du fichier JavaScript dans le fichier html:

LT; IMG SRC = "E: \ Job Articles techniques \ Image.Png "onload =" imageonload () ">

Sortir

Nous avons fourni différentes méthodes pour utiliser l'événement Image Onload dans JavaScript.

Conclusion

Pour utiliser l'événement Image Onload en JavaScript, vous pouvez utiliser le document.Méthode QueySelector () ou fonction définie par l'utilisateur. Dans la première approche, la méthode addEventListener () est appelée avec l'objet de fenêtre utilisé pour ajouter un écouteur d'événements au document.Méthode QueySelector (). Pour la deuxième approche, un objet défini par l'utilisateur peut être créé, qui est accessible dans le fichier HTML via l'événement Onload. Cet article a discuté de la méthode pour utiliser un événement JavaScript Onload.