Comment déclencher un événement « onload » d'image même lorsque l'image est mise en cache ?

Événement de chargement d'image et mise en cache du navigateur

Lors de la création d'une boîte d'alerte après le chargement d'une image, il est courant d'utiliser l'événement .onload. Toutefois, si l'image est déjà mise en cache dans le navigateur, l'événement .onload ne se déclenchera pas. Cela peut présenter un défi si vous souhaitez déclencher une alerte pour toutes les images, quel que soit leur statut de mise en cache.

Solution

Pour résoudre ce problème, il existe deux solutions éprouvées méthodes :

Méthode 1 : définir la propriété onload avant src

Les images générées dynamiquement peuvent déclencher correctement l'événement onload en définissant la propriété onload avant l'attribut src :

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

Méthode 2 : Utiliser l'événement « load » de jQuery

Avec jQuery, vous pouvez utiliser l'événement « load » pour garantir que l'alerte est déclenchée quelle que soit la mise en cache :

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

Ces techniques gèrent efficacement les images en cache et non mises en cache, vous permettant d'afficher l'alerte avec succès dans tous les cas.

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!