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

如何从加载中取消背景图像

1 个答案: