如何在 JavaScript 中判斷背景圖片是否已完全載入？

確定背景圖片的載入狀態

在Web開發中，在各種元素上設定背景圖片，例如body標籤，這是一種常見的做法。但是，在執行後續程式碼之前確保圖像已完全載入可能是一個挑戰。

要解決此問題，請考慮以下方法：

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

此方法建立不可見的圖像元素記憶體中並將所需的背景圖像 URL 分配給其來源屬性。透過監聽 load 事件，您可以偵測圖片何時完全載入，然後將其套用為指定元素的背景圖片。

在JavaScript 中，程式碼將顯示為：

const src = 'http://picture.de/image.png';
const image = new Image();
image.addEventListener('load', function() {
    document.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(() => {
    document.body.style.backgroundImage = `url(${image})`;
});

此方法使您能夠非同步處理影像載入過程，並僅在影像可用時有條件地執行後續操作。

以上是如何在 JavaScript 中判斷背景圖片是否已完全載入？的詳細內容。更多資訊請關注PHP中文網其他相關文章！