Javascript 延迟（延迟）加载背景图像？

我使用一个简单的脚本来延迟加载页面上的所有图像；图像源的路径包含在

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

我想使用相同的脚本延迟加载的背景图像以及。如何更改它，使

数据src

属性最终位于

div

的

背景图像

-属性的

url

-值中

我尝试了以下操作，但没有结果，因为脚本无法将

背景图像

识别为属性：

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

---

问题可能是背景图像作为属性。您是否尝试过使用背景图像设置样式

[].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');
  };
});

---

问题可能是背景图像作为属性。您是否尝试过使用背景图像设置样式

[].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');
  };
});

试试这个

---

试试这个

很有魅力，谢谢。您还可以告诉我如何在背景图像旁边设置其他样式属性，例如背景大小吗？您可以像这样向字符串添加其他CSS。我给它加了红色。div.setAttribute（“样式”，“背景图像：url（“+div.getAttribute（'data-src'）+”）”）；颜色：红色；”；很有魅力，谢谢你。您还可以告诉我如何在背景图像旁边设置其他样式属性，例如背景大小吗？您可以像这样向字符串添加其他CSS。我给它加了红色。div.setAttribute（“样式”，“背景图像：url（“+div.getAttribute（'data-src'）+”）”）；颜色：红色；”；