0

<img>デフォルトでは表示されないいくつかの要素を使用する Web ページがあります。

  • 画像はカルーセルで使用されます

  • 一部の画像はdisplay: none、mobile.css および CSS メディア クエリを使用して非表示に設定されています

ブラウザー、特にモバイル ブラウザーは、画像の読み込みをどのようにキューに入れますか? 画像を細かく制御することは可能ですか？

  • 画像は表示されるまで読み込まれません

  • モバイル メディア クエリが開始された場合、画像の読み込みは mobile.css または付随する Javascript によって中止されます。

  • <img>CSS背景画像と要素画像の振る舞いの違いは何ですか(もしあれば)

この種の状況で、モバイル ブラウザー (WebKit) はどのような戦略を使用しますか?

サンプル サイトとして、オープン ソース サイトhttp://fi.pycon.org/2012/を使用できます。HTML と CSS で作成されたロゴ要素があります。

https://github.com/python-finland/fi.pycon.org/blob/master/2012/index.html#L85

そして、この要素はデフォルトで表示されます (デスクトップ)

https://github.com/python-finland/fi.pycon.org/blob/master/media/2012/css/theme.css#L99

しかし最終的には、mobile.css とメディア クエリを介してモバイル ブラウザーに対して非表示になります。

https://github.com/python-finland/fi.pycon.org/blob/master/media/2012/css/moobile.css#L20

  • モバイル ブラウザは、ロゴ イメージ ファイルが読み込まれないように最適化されていますか?

  • <img>要素がロゴに使用された場合、ケースは異なりますか?

  • CSS ルールのオーバーライドが別の CSS ファイル (およびメディア クエリ) にあるかどうかは重要ですか?

注: メディア クエリをどのように処理するかは、この質問の範囲外であり、基本的な CSS とメディア クエリを別の方法で構築するよう指示する回答には興味がありません。私はこれらの解決策をよく知っています。

4

1 に答える 1

2

現時点では、<img> タグ内の画像がそのままの HTML+CSS で読み込まれないようにするための実行可能な標準化されたオプションはありません。これが、 W3C レスポンシブ イメージ ワーキング グループが結成された理由の 1 つです。

...提案されている CSS ベースのソリューションは、私たちが回避しようとしている基本的な [sic] 問題の 1 つを説明していません: スワッピング ロジックが適用される前にリクエストが行われる可能性があるため、より広い画面幅で複数のアセットをダウンロードすることです。

これは、JavaScript ベースの暫定ソリューションが機能しないということではなく、純粋な HTML+CSS ベースのソリューションが機能しないということだけです。だから、あなたの質問に答えるために：

1. モバイル ブラウザは、ロゴ イメージ ファイルが読み込まれないように最適化されていますか?

いいえ、隠し要素 は背景画像をロードします。

2. 要素がロゴに使用された場合、ケースは異なりますか?

いいえ。CSS が適用される前に、画像の読み込みがプリエンプティブに開始される可能性が非常に高くなります。

3. オーバーライドする CSS ルールが別の CSS ファイル (およびメディア クエリ) にあるかどうかは重要ですか?

いいえ。これにより、回答 2 に記載されているスワッピング ロジックが適用されるまでにさらに遅延が発生する可能性が高く、画像が既にロードを開始している可能性が高くなります。

于 2012-09-11T11:45:54.570 に答える