Wie kann sichergestellt werden, dass ein Hintergrundbild vor der Codeausführung geladen wird?

Sicherstellen, dass das Hintergrundbild vor der Codeausführung geladen wird

Das Einfügen eines Hintergrundbilds in den Body-Tag und das Einleiten der anschließenden Codeausführung kann bei der Bestimmung eine Herausforderung darstellen wenn das Bild vollständig geladen ist. Die Verwendung der herkömmlichen Funktion „load()“, wie im bereitgestellten Beispiel gezeigt, reicht nicht aus.

Lösung:

Um diese Hürde zu überwinden, sollten Sie den folgenden Ansatz in Betracht ziehen:

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

Dieser Code erstellt ein neues Bild im Speicher und nutzt das Ladeereignis, um zu erkennen, wann das Quellbild geladen wurde. Durch das Entfernen des Bildes nach dem Laden werden potenzielle Speicherlecks vermieden.

Vanilla-JavaScript-Implementierung:

Für Vanilla-JavaScript hat die Lösung die folgende Form:

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

Versprechensbasierte Abstraktion:

Um den Prozess zu abstrahieren, ein praktisches Hilfsmittel Es kann eine Funktion erstellt werden, die ein Versprechen zurückgibt:

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 sichergestellt werden, dass ein Hintergrundbild vor der Codeausführung geladen wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!