Comment puis-je implémenter des rappels pour gérer les événements de chargement d'image en JavaScript ?

Implémenter des rappels pour les événements de chargement d'images

Lorsque vous travaillez avec des images dans des applications Web, savoir quand elles ont fini de se charger devient crucial pour certaines fonctionnalités. Un moyen efficace d’y parvenir consiste à utiliser des rappels. Dans cet article, nous allons explorer comment exécuter un rappel JavaScript dès la fin du chargement d'une image.

Utiliser .complete avec des rappels

Pour une application conforme aux normes méthode sans dépendances supplémentaires, vous pouvez utiliser la propriété .complete avec des fonctions de rappel. Cette technique garantit que vous n'attendez pas plus longtemps que nécessaire pour que l'image se charge :

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

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

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

Cet extrait de code vérifie d'abord si l'image est déjà chargée en examinant sa propriété .complete. Si c'est vrai, le rappelloaded() est invoqué immédiatement. Si c'est faux, les écouteurs d'événements sont attachés aux événements de chargement et d'erreur pour gérer respectivement le rappel et la gestion des erreurs.

Cette méthode est fiable et garantit que le rappel est exécuté dès que l'image est complètement chargée, minimiser les temps d'attente inutiles.

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!