如何檢測背景圖像何時載入？-js教程-PHP中文網

如何檢測背景圖像何時載入？

Barbara Streisand

發布： 2024-11-14 11:35:02

原創

231 人瀏覽過

How Can I Detect When a Background Image Has Loaded?

偵測背景圖片載入狀態

渴望在成功載入正文標籤的背景圖片時觸發一些程式碼？介紹這個難以解決的問題的解決方案：

使用 $().load() 的初始方法由於其對 DOM 元素（不包括背景圖像）的限製而失敗。相反，我們採用以下策略：

建立一個新的圖像元素並設定其 src 屬性以匹配目標背景圖像的 URL。
利用「load」事件偵聽器來捕捉影像載入完成。

在jQuery 中，該技術翻譯為到：

$('<img/>').attr('src', 'http://picture.de/image.png').on('load', function() {
  $(this).remove(); // Prevent memory leaks suggested by @benweet
  $('body').css('background-image', 'url(http://picture.de/image.png)');
});

登入後複製

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