如何取消加载背景图像

Question

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

有几个问题显示了如何通过将src设置为''或不同的图像来取消<img>标签的加载(例如Luca Fagioli回答的这个问题(。但这不适用于背景图像。

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

但是修改该 jsfiddle 以使用background-image清楚地表明图像继续加载，即使：

你做background-image: none(如此处建议(

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