javascript - 如何取消加载背景图片

Question

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

有几个问题显示如何取消加载 <img>通过设置 src 标记至 ''或不同的图像(例如 this one, answered by Luca Fagioli )。但这不适用于背景图像。

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