Comment puis-je exécuter une fonction de rappel après le chargement d'une image en JavaScript ?

Manières alternatives de gérer le chargement d'images avec un rappel

Lors du chargement d'une image, savoir quand il est terminé peut être crucial pour la mise en œuvre de fonctionnalités spécifiques . Cette question explore les options d'exécution d'un rappel lors du chargement d'une image en JavaScript.

Solution 1 : rappel .complete

Une approche fiable et conforme aux normes implique l'utilisation du .complete propriété avec une fonction de rappel. .complete vérifie si le chargement de l'image a déjà été terminé, garantissant que le rappel est déclenché immédiatement le cas échéant.

var img = document.querySelector('img');

function loaded() {
  alert('loaded');
}

if (img.complete) {
  loaded();
} else {
  img.addEventListener('load', loaded);
  img.addEventListener('error', function() {
      alert('error');
  });
}

Ce code :

1. Initialise un élément d'image avec img.
2. Définit une fonction de rappel chargée pour gérer le chargement de l'image.
3. Vérifie si l'image est déjà complète en utilisant .complete.
4. S'il est terminé, appelle le rappel immédiatement.
5. S'il n'est pas terminé, attache les écouteurs d'événements pour « charger » (pour exécuter le rappel au chargement) et « erreur » (pour notifier d'échec de chargement).

Notes supplémentaires

Cette approche est très efficace car il déclenche le rappel dès que l'image est prête, évitant ainsi les retards inutiles causés par l'attente de l'écouteur d'événements. Il est également pris en charge par les principaux navigateurs et permet une gestion facile des erreurs.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!