How can you cancel the loading of an image defined by a background-image
attribute?
There a few questions that show how to cancel the loading of an <img>
tag by setting the src
to ''
or to a different image (such as this one, answered by Luca Fagioli). But this does not work for background images.
Luca provided a jsfiddle ( jsfiddle.net/nw34gLgt/ ) to demonstrate the <img src="" />
approach to canceling an image load.
But modifying that jsfiddle to use background-image
instead clearly shows that the image continues loading, even if:
you do background-image: none
(as suggested here)
or background-image: url("web.site/other_image.jpg")
or background-image: url('')
.
In fact, in my testing on Firefox 54, the background image continues loading even if you do window.stop()
or close the tab.
So, is there any way at all to stop loading a background image once it starts?
My use-case for this is client-side, so I can't change the site to not use background images. I am viewing a gallery of many thumbnail images, but the thumbnails are much larger than they need to be. Smaller versions are available so I wanted to replace the large thumbnails with the smaller versions via Greasemonkey to ease the network load on my poor, slow connection. Each entry in the gallery is a <div>
with a background-image inside an <a>
linking to the full-size image. (using Fotorama).