如何取消由 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 )。
最佳答案
如果您需要在元素上定位内联样式,那么我认为您可以在页面底部附近运行一个脚本来执行此操作。
在本地进行测试,原始图像不会在网络选项卡中显示为正在加载。
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');
}
关于javascript - 如何取消加载背景图片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45250139/