如何取消加载由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)。
答案 0 :(得分:0)
如果您需要在元素上定位内联样式,那么我认为您可以在页面底部附近运行脚本来执行此操作。
在本地测试,原始图像不在网络标签中显示为加载。
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');
}