Wie kann man zuverlässig prüfen, ob ein Hintergrundbild geladen wurde?

Verwenden eines Hintergrundbild-Loaders

Sie versuchen zu überprüfen, ob ein Hintergrundbild geladen wurde, indem Sie ein Hintergrundbild auf dem Body-Tag festlegen und dann die Funktion „load()“ verwenden. Dieser Ansatz funktioniert jedoch nicht effektiv für Hintergrundbilder.

Um wirklich sicherzustellen, dass das Hintergrundbild vollständig geladen wurde, können Sie eine andere Technik verwenden:

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

Diese Methode erstellt ein legt ein neues Bild im Speicher ab und hängt einen Ladeereignis-Listener daran an. Sobald das Bild geladen wurde, wird das Ladeereignis ausgelöst und das Hintergrundbild wird auf dem Body-Tag festgelegt.

In Vanilla-JavaScript kann dies wie folgt implementiert werden:

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

Sie können Erstellen Sie außerdem eine abstrahierte Funktion, um das Laden des Bildes zu handhaben und ein Versprechen zurückzugeben:

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

Mit diesem Ansatz können Sie zuverlässig überprüfen, ob das Laden des Hintergrundbilds abgeschlossen ist, und sicherstellen, dass Code erst ausgeführt wird, wenn das Bild geladen ist voll beladen.

Das obige ist der detaillierte Inhalt vonWie kann man zuverlässig prüfen, ob ein Hintergrundbild geladen wurde?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!