Comment garantir que l'événement « onload » d'une image se déclenche même avec la mise en cache du navigateur ?

Chargement d'images en cache et cache du navigateur

Lors de la tentative d'affichage d'une alerte après le chargement d'une image, l'événement .onload peut ne pas se déclencher si l'image a été mise en cache dans le navigateur. Pour garantir que l'alerte est affichée quelle que soit la mise en cache, il existe plusieurs approches :

Définir la propriété onload avant la source

Configurer la propriété .onload avant de définir la source (src) de l'image. Cela garantit que l'écouteur d'événement onload est enregistré avant que le navigateur ne vérifie son cache pour l'image :

var img = new Image();
img.onload = function () {
   alert("image is loaded");
}
img.src = "img.jpg";

Utilisation du gestionnaire d'événements jQuery

Vous pouvez également utiliser le .on de jQuery (« charger ») gestionnaire d'événements. Cette méthode est particulièrement efficace pour les images générées dynamiquement :

var img = new Image();
// 'load' event
$(img).on('load', function() {
  alert("image is loaded");
});
img.src = "img.jpg";

Les deux méthodes déclenchent efficacement l'événement d'alerte, que l'image soit mise en cache ou non. En modifiant l'ordre d'enregistrement des événements ou en utilisant jQuery, l'événement .onload peut être assuré de se déclencher même si l'image réside dans le cache du navigateur.

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!