7

さて、メディアクエリとを使用して、非常に小さい画面サイズの画像を表示しないレスポンシブレイアウトを設計しましたdisplay: none;。

ここまでは順調ですね。ただし、これらのイメージは引き続きこれらのデバイスにダウンロードされるため、帯域幅が増加します。

これらの画像を指定されたデバイスにダウンロードしないようにする適切な方法は何ですか？

どんな回答でも大歓迎です！

4

4 に答える 4

3

私が考えることができる2つのオプション：

  1. ブラウザスニッフィングを使用してサーバー上の小さなデバイスを検出し、画像を参照しない別のHTMLを送信します。
  2. または/および（IE 6または7ではサポートされていません）を使用して、HTMLではなくCSSを介して（style必要に応じて属性で）画像を表示し、そのCSSコードをメディアクエリでラップして、より大きな画面のデバイスでのみ表示されるようにします。background-image:before:aftercontent
于 2011-09-12T09:19:18.837 に答える
2

現在アクセス可能な唯一の解決策は、画像をタグでラップし、<noscript>後でjavascriptを使用して画像を引き出すことです。Cookieは、最初のページの読み込み（HTMLPreloadScanner）でも、CDNでも機能しません。画像が常にビューポートの100％であるとは限らない場合、ブラウザスニッフィングは役に立ちません。

Slimmage.jsは、3KBのバニラJSでコンテキストに適したレスポンシブ画像を実装します。

マークアップも非常に単純です。

<noscript data-slimmage>
  <img src="http://z.zr.io/ri/1s.jpg?width=150" />
</noscript>

もちろん、サーバー側のヘルパーを作成して、これを抽象化することもできます。

于 2013-07-08T17:14:34.313 に答える
0

javascriptの依存関係を気にしない場合はwindow.innerWidth、十分に大きな画面の画像タグを確認して挿入できます。

画像は、JavaScriptが有効で、ウィンドウが十分に大きい場合にのみ要求されます。

于 2011-10-05T22:22:43.820 に答える
0

追加のJavaScriptを使用しても問題がない場合は、これを試してみてください。メディアクエリを検索して学習しているときに、私はそれに遭遇しました。

于 2012-08-12T17:25:06.130 に答える