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 neues Bild im Speicher 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 auch eine abstrahierte Funktion erstellen, 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 vollständig geladen ist.