Wie kann ich erkennen, wann ein Hintergrundbild geladen wurde?

Erkennen des Ladestatus des Hintergrundbilds

Möchten Sie einen Code auslösen, wenn das Hintergrundbild eines Body-Tags erfolgreich geladen wird? Wir stellen eine Lösung für dieses schwer fassbare Problem vor:

Der anfängliche Ansatz mit $().load() schlägt aufgrund seiner Beschränkung auf DOM-Elemente, ausgenommen Hintergrundbilder, fehl. Stattdessen wenden wir die folgende Strategie an:

1. Erstellen Sie ein neues Bildelement und legen Sie dessen src-Attribut so fest, dass es mit der URL des Zielhintergrundbilds übereinstimmt.
2. Verwenden Sie zum Erfassen den Ereignis-Listener „load“. der Abschluss des Bildladens.

In jQuery wird diese Technik übersetzt zu:

$('<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)');
});

Implementieren dieser Logik in 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;

Erweitern Sie Ihren Code, indem Sie diese Funktionalität in eine praktische Funktion kapseln, die ein Versprechen liefert:

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})`;
});

Das obige ist der detaillierte Inhalt vonWie kann ich erkennen, wann ein Hintergrundbild geladen wurde?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!