延遲（延遲）加載背景圖片？

Question

我使用一個簡單的腳本來導致頁面上所有圖像的延遲加載； 圖像源的路徑包含在data-src屬性中，然后放入img標簽的實際src屬性中。 延遲加載方法的大多數（？）實現幾乎是如何工作的。

這是腳本：

[].forEach.call(document.querySelectorAll('img[data-src]'), function(img) {
  img.setAttribute('src', img.getAttribute('data-src'));
  img.onload = function() {
    img.removeAttribute('data-src');
  };
});

我也想使用相同的腳本來延遲加載背景圖像。 我如何更改它，以便data-src屬性以div的background-image -property的url -value結尾？

我嘗試了以下操作，但沒有結果，因為腳本無法將background-image識別為屬性：

[].forEach.call(document.querySelectorAll('div[data-src]'), function(div) {
  div.setAttribute('background-image', div.getAttribute('data-src'));
  div.onload = function() {
    div.removeAttribute('data-src');
  };
});

Answer 1

問題可能出在背景圖像作為屬性上。 您是否嘗試過使用背景圖片設置樣式？

[].forEach.call(document.querySelectorAll('div[data-src]'), function(div) {
  div.setAttribute("style","background-image: url(" + div.getAttribute('data-src') + ");");
  div.onload = function() {
    div.removeAttribute('data-src');
  };
});

Answer 2

[].forEach.call(document.querySelectorAll('div[data-src]'), function(div) {
  div.style.backgroundImage="url('" + div.getAttribute('data-src') + "')";
  div.onload = function() {
    div.removeAttribute('data-src');
  };
});

嘗試這個