5

私は、フルサイズの Web サイトの背景に画像を含むスライドショーがある (バックストレッチで画面を完全に埋める) 企業向けにレスポンシブ Web サイトを開発しています。画像のサイズがかなり大きい (約 300k) ため、スマートフォンでサイトを表示するときに画像が読み込まれないようにする方法を探しています。

メディアクエリを使用して backstretch div に適用display: noneしました。visibility: hidden画像を非表示にしますが、まだダウンロード中のようです。ブラウザにそれらを完全に無視させるスマートな方法はありますか?

4

3 に答える 3

6

もう 1 つのオプションは、モバイル ファーストのアプローチを採用することです。モバイル用のデフォルト スタイルを定義し、より広い画面幅のメディア クエリでこれらをオーバーライドします。

次のようなものは、画像がモバイルデバイスにダウンロードされるのを防ぎ、不要なラッパー div の必要性も回避します:)

HTML:

<div class="container">
    <!-- slideshow container -->
</div>

CSS:

/* default to no background image */
.container {
    background-image: none; 
}

/* add it in for wider screens */
@media screen and (min-width: 500px) {
    .container {
        background-image: url(myimage.png);
    }
}
于 2012-07-06T05:09:46.947 に答える
6

CSS を使用して画像を設定している場合は、方法があります。

div を display:none に設定してもダウンロードは行われますが、親 div を display:none に設定すると、設定するメディア クエリが起動されるまで読み込まれません。

CSS

.parent {display:block;}
.background {background-image:url(myimage.png);}

@media only screen and (max-width:480px) {
.parent {display:none;}
}

HTML

<div class="parent">
   <div class="background"></div>
</div>

Tim Kadlec へのハット チップ - http://timkadlec.com/2012/04/media-query-asset-downloading-results/

于 2012-05-01T10:14:28.873 に答える
1

visibilitydisplay画像がダウンロードされるかどうかとは関係ありません。あなたができる唯一のことは、すべての画像を背景画像として持ち、メディアクエリを使用して代替スタイルシートでそれらを完全に除外することです.

于 2012-04-30T19:12:01.817 に答える