javascript - 延迟(延迟)加载背景图像？

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 的 的 url 值中背景图像-属性？

我尝试了以下操作，但没有结果，因为脚本无法将 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');
  };
});