Question

我正在使用一个简单的脚本来导致页面上所有图像的延迟加载;图像源的路径包含在data-src属性中，然后放入src标记的实际img属性中。几乎所有（？）延迟加载方法的实现都有效。

这是脚本：

[].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属性最终位于url - div background-image - 属性的值？

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

试试这个

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

2 个答案: