如何確保在設計正文之前載入背景圖片？-js教程-PHP中文網

如何確保在設計正文之前載入背景圖片？

Mary-Kate Olsen

發布： 2024-11-17 20:55:02

原創

692 人瀏覽過

How to Ensure a Background Image is Loaded Before Styling the Body?

如何檢查背景圖片是否已加載

為了確保在運行任何程式碼之前背景圖片已完全加載，例如當更改body 標籤的樣式時，需要一種替代方法。詳細解如下：

建立影像物件：

const image = new Image();

登入後複製

設定圖片來源：

image.src = 'http://picture.de/image.png';

登入後複製

使用載入事件：

image.addEventListener('load', function() {
  // Code to be executed after the image is loaded
});

登入後複製

應用背景圖片：

圖片載入後，您可以繼續將其應用為背景圖片：

const body = document.querySelector('body');
body.style.backgroundImage = `url('${image.src}')`;

登入後複製

使用Promise-基於解決方案：

對於更結構化的方法，可以使用基於承諾的函數：

function loadImage(src) {
  return new Promise((resolve, reject) => {
    const image = new Image();
    image.addEventListener('load', () => resolve(image));
    image.addEventListener('error', () => reject(`Failed to load image: ${src}`));
    image.src = src;
  });
}

loadImage('http://picture.de/image.png').then(image => {
  body.style.backgroundImage = `url('${image.src}')`;
});

登入後複製

以上是如何確保在設計正文之前載入背景圖片？的詳細內容。更多資訊請關注PHP中文網其他相關文章！