如何確保在程式碼執行之前載入背景圖像？

確保在程式碼執行之前載入背景影像

將背景影像合併到body 標籤中並啟動後續程式碼執行可能會在確定時帶來挑戰如果圖像已完全加載。使用傳統的 load() 函數（如提供的範例所示）是不夠的。

解決方案：

要克服此障礙，請考慮以下方法：

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

此程式碼在記憶體中建立新影像，利用載入事件來偵測來源影像何時載入。透過在載入後刪除圖像，可以避免潛在的記憶體洩漏。

Vanilla JavaScript 實作：

對於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;

基於Promise 的抽象：

要抽象化流程，可以建立一個方便的函數，回傳一個Promise：

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

以上是如何確保在程式碼執行之前載入背景圖像？的詳細內容。更多資訊請關注PHP中文網其他相關文章！