Wie kann sichergestellt werden, dass ein Hintergrundbild geladen ist, bevor der Körper gestylt wird?

So überprüfen Sie, ob ein Hintergrundbild geladen ist

Um sicherzustellen, dass ein Hintergrundbild vollständig geladen ist, bevor Code ausgeführt wird, z Da der Stil des Body-Tags geändert werden muss, ist ein alternativer Ansatz erforderlich. Hier ist eine detaillierte Lösung:

1. Bildobjekt erstellen:

const image = new Image();

2. Bildquelle festlegen:

image.src = 'http://picture.de/image.png';

3. Verwenden des Ladeereignisses:

image.addEventListener('load', function() {
  // Code to be executed after the image is loaded
});

4. Hintergrundbild anwenden:

Nachdem das Bild geladen wurde, können Sie es als Hintergrundbild anwenden:

const body = document.querySelector('body');
body.style.backgroundImage = `url('${image.src}')`;

5. Verwendung einer auf Versprechen basierenden Lösung:

Für einen strukturierteren Ansatz kann eine versprechungsbasierte Funktion genutzt werden:

function loadImage(src) {
  return new Promise((resolve, reject) => {
    const image = new Image();
    image.addEventListener('load', () => resolve(image));
    image.addEventListener('error', () => reject(`Failed to load image: ${src}`));
    image.src = src;
  });
}

loadImage('http://picture.de/image.png').then(image => {
  body.style.backgroundImage = `url('${image.src}')`;
});

Das obige ist der detaillierte Inhalt vonWie kann sichergestellt werden, dass ein Hintergrundbild geladen ist, bevor der Körper gestylt wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!