背景画像の読み込みを取り消す方法

Question

background-image属性で定義された画像の読み込みをキャンセルするにはどうすればよいですか？

<img>タグの読み込みをキャンセルする方法を示すいくつかの質問には、srcを''に設定するか、別の画像（this one, answered by Luca Fagioliなど）に設定します。しかし、これは背景画像では機能しません。

ルカは、画像負荷を相殺する<img src="" />アプローチを実証するためにjsfiddle（jsfiddle.net/nw34gLgt/）を得ました。 （hereを示唆したように）

あなたがbackground-image: none

またはbackground-image: url("web.site/other_image.jpg")

かbackground-image: url('')：

しかしmodifying that jsfiddleはあっても、background-imageではなく、明確にイメージをロードし続けていることを示して使用します。

Firefox 54での私のテストでは、window.stop()を実行したりタブを閉じたりしても、バックグラウンドイメージの読み込みが続けられます。

だから、起動後に背景画像の読み込みを停止する方法はありますか？

---

このための私のユースケースは、クライアント側であるので、私は背景画像を使用しないようにサイトを変更することはできません。私は多くのサムネイル画像のギャラリーを見ていますが、サムネイルは必要以上に大きくなっています。より小さなバージョンが利用可能なので、大きなサムネイルをGreasemonkeyを使って小さなバージョンに置き換えて、貧弱で低速な接続でネットワーク負荷を軽減したいと考えました。ギャラリーの各エントリはで、<a>の内部に背景イメージがあり、フルサイズのイメージにリンクしています。 （Fotoramaを使用）。

Answer 1

要素のインラインスタイルをターゲットにする必要がある場合は、ページ下部にスクリプトを実行してそのようにすることができます。

これをローカルでテストすると、オリジナルの画像はではなく、がネットワークタブに表示されます。 すべてののdivをつかむために起こっている

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? 
    } 
} 

は、うまくいけば、これらの要素は、あなたが最初に照会するために使用できるクラスを持っています。次に、上記を実行する小さなコレクションがあります。

クラスではなく、インラインスタイル：

あなたがクラスをターゲットにすることができれば、それは少しきれいになります。新しいクラスを作成して使用することができます。

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