Comment puis-je utiliser les rappels pour gérer le chargement d'images en JavaScript ?

Chargement d'images en JavaScript avec rappels

Lorsque vous travaillez avec des images, il est souvent nécessaire de savoir quand leur chargement est terminé. Cela vous permet d'effectuer des actions en fonction de l'état de l'image, comme l'afficher ou la traiter davantage.

Méthode de rappel

En JavaScript, une approche courante pour la gestion du chargement des images consiste à utiliser une fonction de rappel. Un rappel est une fonction qui est invoquée lorsqu'un événement spécifique se produit, tel que le chargement complet de l'image.

La propriété .complete d'un élément d'image indique son état de chargement. Si l'image est déjà chargée, vous pouvez appeler directement la fonction de rappel. Sinon, vous pouvez attacher un écouteur d'événement 'onload' à l'image.

Voici un exemple :

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

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

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

Source : http://www.html5rocks.com/en/tutorials/ es6/promises/

En tirant parti de cette approche, vous pouvez déterminer de manière fiable l'état de chargement de l'image et exécuter les actions appropriées via le rappel fourni. fonction.

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!