JavaScript onload (Français)

Résumé: dans ce didacticiel, vous apprendrez à gérer l’événement load qui se déclenche sur le document, l’image et les éléments de script en JavaScript.

L’événement de chargement de la fenêtre

Pour l’objet window, l’événement load est déclenché lorsque le Toute la page Web (HTML) a été chargée complètement, y compris toutes les ressources dépendantes telles que les fichiers JavaScript, les fichiers CSS et les images.

Pour gérer l’événement load, vous vous inscrivez un écouteur d’événements utilisant la méthode addEventListener():

Code language: JavaScript (javascript)

Ou en utilisant la onload propriété de l’objet window:

Code language: JavaScript (javascript)

Si vous maintenez un ancien système, vous constaterez peut-être que le gestionnaire d’événements load est enregistré dans l’élément body du document HTML, comme ceci:

C’est une bonne pratique d’utiliser le addEventListener() pour affecter le gestionnaire d’événements onload chaque fois que possible.

L’événement de chargement de l’image

Le load se produit également sur les images. Pour gérer l’événement load sur les images, vous pouvez utiliser la méthode addEventListener() des éléments de l’image.

Le L’exemple suivant utilise le gestionnaire d’événements load pour déterminer si une image, qui existe dans l’arborescence DOM, a été complètement chargée:

Vous pouvez attribuer un onload gestionnaire d’événements utilisant directement l’attribut onload de l’élément <img>, comme ceci:

Code language: HTML, XML (xml)

Si vous créez un élément d’image de manière dynamique, vous pouvez attribuer un gestionnaire d’événements onload avant de définir le src comme suit:

Comment ça marche:

  • Commencez par créer un élément image après que le document a été complètement chargé en plaçant le code dans le gestionnaire d’événements de l’événement de chargement de la fenêtre.
  • Ensuite, attribuez le gestionnaire d’événements onload à l’image.
  • Troisièmement, ajoutez l’image au document.
  • Enfin, attribuez une URL d’image à l’attribut src. L’image sera téléchargée dans l’élément dès que la propriété src sera définie.

L’événement de chargement du script

Le <script> prend également en charge l’événement load légèrement différent des méthodes standard.

L’événement load du script vous permet pour vérifier si un fichier JavaScript a été complètement chargé.

Contrairement aux images, le navigateur Web ne commence à télécharger les fichiers JavaScript qu’après l’attribution de la propriété src et l’attribution de la propriété L’élément <script> a été ajouté au document.

Le code suivant charge le fichier app.js une fois la page complètement chargé. Il attribue un gestionnaire d’événements onload pour vérifier si le app.js a été complètement chargé.

Résumé

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *