3

ここにも同様の質問がありますが、<img>タグに関するものだと思います。と同じかどうかはよくわかりませんbackground-image。

レスポンシブウェブサイトを作成していますが、携帯電話からアクセスした場合（またはウィンドウ幅が小さい場合）に画像を読み込ませたくないという問題があります。display: none;ifを使って画像を適用しただけでは@media、携帯電話に表示されているかどうかに関係なく、とにかく画像をロードすると時間とリソースが無駄になると思います。

私が必要としているのは、画像（<img>またはを含む要素background-image）が表示されている場合にのみロードすることです。どういうわけか自分のサイトの応答性を最適化するのが心配です。

javascript（またはjQuery）を使用して実行する場合は、非常に軽量であると便利です。ありがとう！

4

2 に答える 2

5

この記事を引用する：

CSSを介して設定された、または要素にインラインで設定された非表示の要素の画像[背景]は、私たちが考えた/期待したものとは逆に、毎回読み込まれます。

ただし、背景画像を含む未使用のcssルールは読み込まれません。

したがって、ビューポートがXより大きい場合にのみ、javascript/jqueryを使用してbackground-imageクラスを動的に追加することができます。

これは、その方法の簡単なデモです。

HTML

<div id="yourdiv"></div>

CSS

#yourdiv {
    background:yellow;
}
#yourdiv.backgrounded {
  background:url(your-image.jpg) top left no-repeat;
}​

jQuery

$(window).on('load resize',function(){
    var w=window,
        d=document,
        e=d.documentElement,
        g=d.getElementsByTagName('body')[0];
    var docWidth = w.innerWidth||e.clientWidth||g.clientWidth;
    if(docWidth>600){ /* replace 600 with the screen width you want to target */
      yourdiv.addClass('backgrounded');
    }
});​

（jsFiddleはトリガーされないloadため、ドキュメントのサイズを変更して機能することを確認する必要があります）

警告：これにより、画像の読み込みが「遅延」する可能性があるため、必ず結果をテストしてください。

于 2012-10-05T17:09:48.413 に答える
4

メディアクエリを使用して、小さなデバイスのバックグラウンドへの呼び出しを削除することもできます。

したがって、DIV XがデスクトップにBGをロードする場合は、単にbackground-image：noneをmin-maxクエリのモバイルrezの同じDIVに適用します。デスクトップでも同じことを行いますが、逆にすると、小さい画像または大きい画像をロードします。

したがって、レスポンシブサイトでは、.classにbackground-image：noneと通知されているため、モバイルrezは画像をまったくロードしません。同じ.classには、より高い解像度のbackground-image：img.jpgがあります。

于 2014-01-15T19:09:03.513 に答える