Comment puis-je détecter le chargement d'une image d'arrière-plan ?

Détection de l'état de chargement de l'image d'arrière-plan

Vous aspirez à déclencher du code lors du chargement réussi de l'image d'arrière-plan d'une balise body ? Présentation d'une solution à ce problème insaisissable :

L'approche initiale utilisant $().load() échoue en raison de sa limitation aux éléments DOM, à l'exclusion des images d'arrière-plan. Au lieu de cela, nous utilisons la stratégie suivante :

1. Créez un nouvel élément d'image et définissez son attribut src pour qu'il corresponde à l'URL de l'image d'arrière-plan cible.
2. Utilisez l'écouteur d'événement 'load' pour capturer l'achèvement du chargement de l'image.

Dans jQuery, cette technique se traduit par :

$('<img/>').attr('src', 'http://picture.de/image.png').on('load', function() {
  $(this).remove(); // Prevent memory leaks suggested by @benweet
  $('body').css('background-image', 'url(http://picture.de/image.png)');
});

Implémentation de cette logique dans Vanilla JavaScript :

var src = 'http://picture.de/image.png';
var image = new Image();
image.addEventListener('load', function() {
  body.style.backgroundImage = 'url(' + src + ')';
});
image.src = src;

Élevez votre code en encapsulant cette fonctionnalité dans une fonction pratique qui donne une promesse :

function load(src) {
  return new Promise((resolve, reject) => {
    const image = new Image();
    image.addEventListener('load', resolve);
    image.addEventListener('error', reject);
    image.src = src;
  });
}

const image = 'http://placekitten.com/200/300';
load(image).then(() => {
  body.style.backgroundImage = `url(${image})`;
});

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!