如何可靠地檢查背景圖片是否已載入？

使用背景圖片載入器

您正在嘗試透過在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)');
});

此方法創建一個內存中的新圖像並向其附加加載事件偵聽器。映像載入後，將觸發 load 事件，並在 body 標籤上設定背景圖片。

在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;

您可以也建立一個抽象函數來處理圖片載入並傳回承諾：

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中文網其他相關文章！