如何取消加载背景图像

Question

如何取消加载由background-image 属性定义的图像？

有几个问题展示了如何通过将src 设置为'' 或其他图像（例如this one, answered by Luca Fagioli）来取消加载<img> 标记。但这不适用于背景图片。

Luca 提供了一个 jsfiddle (jsfiddle.net/nw34gLgt/) 来演示取消图像加载的 <img src="" /> 方法。

但modifying that jsfiddle 改为使用background-image 清楚地表明图像继续加载，即使：

你做background-image: none（建议here）

或background-image: url("web.site/other_image.jpg")

或background-image: url('')。

事实上，在我对 Firefox 54 的测试中，即使您执行window.stop() 或关闭选项卡，背景图像也会继续加载。

那么，有没有什么办法可以在背景图片启动后停止加载？

---

我的用例是客户端，因此我无法将网站更改为不使用背景图片。我正在查看一个包含许多缩略图图像的画廊，但缩略图比它们需要的大得多。有较小的版本可用，所以我想通过 Greasemonkey 用较小的版本替换大缩略图，以减轻我糟糕、缓慢的连接上的网络负载。图库中的每个条目都是<div>，在<a> 中带有背景图像，链接到全尺寸图像。 （使用Fotorama）。

Answer 1

如果您需要在元素上定位内联样式，那么我认为您可以在页面底部附近运行一个脚本来执行此操作。

在本地对此进行测试，原始图像不显示为在网络标签中加载。

var allDivs = document.getElementsByTagName('DIV');

for (var i = 0; i < allDivs.length; i++) {
  // check for inline style
  var inlineStyle = allDivs[i].getAttribute('style');

  // check if background-image is applied inline
  if (inlineStyle && inlineStyle.indexOf('background-image') != 1 ) {
    allDivs[i].style.backgroundImage = 'url("newImg.jpg")'; // assign new value?
  }
}

这将获取 每个 div，因此希望这些元素有一个类可以用来首先查询。然后你有一个较小的集合来运行上面的。

类，而不是内联样式：

如果你可以定位类，它看起来会更干净一些。您可以创建一个新类并使用它。

var els = document.querySelectorAll('.bg-img');
for (var i = 0; i < els.length; i++) {
  els[i].classList.remove('bg-img');
  els[i].classList.add('no-bg-img');
}