測定画像HTTPリクエスト

一般的なブラウザでテスト ページを開き、Fiddler で http リクエストを表示してください。

1. 画像を非表示にする
<img src="1.jpg" style="display: none" />テスト: test_1.html
結論: Opera のみがリクエストを生成しません。
注意: visibility: hidden で画像を非表示にすると、Opera でもリクエストが生成されます。

2. 画像を繰り返す
<img src="1.jpg" /><img src="1.jpg" />テスト: test_2.html
結論: すべてのブラウザは 1 つのリクエストのみを実行します。

3. 背景の繰り返し
<style type="text/css"> .test1 { 背景: url(1.jpg) } .test2 { 背景: url(1.jpg) }</style><div class="test1">test1</div><div class="test2">test2</div>テスト: test_3.html
結論: すべてのブラウザは 1 つのリクエストのみを実行します。

4. 存在しない要素の背景
<style type="text/css"> .test1 { background: url(1.jpg) } .test2 { background: url(2.jpg) } /* ページ内にクラス test2 の要素はありません */</style><div class="test1">test1</div>Test: test_4.html
結論: 背景は、適用された要素がページ上に存在する場合にのみリクエストを生成します。これは CSS フレームワークには意味があります。

5. 要素の背景を非表示にする
<style type="text/css"> .test1 { background: url(1.jpg); display: none; } .test2 { background: url(2.jpg); visibility: hidden; }</style><div class="test1">test1</div>テスト: test_5.html
結論: Opera と Firefox は、display: none で非表示にされた要素の背景に対して HTTP リクエストを生成しません。背景画像は、これらの要素が display: none でない場合にのみ要求されます。

6. 複数の背景
<style type="text/css"> .test1 { 背景: url(1.jpg); } .test1 { 背景: url(2.jpg); }</style><div class="test1">test1</div>テスト: test_6.html
結論: Webkit レンダリング エンジンに基づく Safari と Chrome を除き、他のブラウザーは 1 つの背景画像のみを要求します。
注: WebKit ブラウザは CSS3 で複数の背景画像をサポートしているため、すべての背景画像を要求します。

7. ホバーバックグラウンド読み込み
<style type="text/css"> a.test1 { background: url(1.jpg); } a.test1:hover { background: url(2.jpg); }</style><a href="#" class="test1">test1</a>テスト: test_7.html
結論: ホバーがトリガーされると、ホバー状態の背景が要求されます。ちらつきの原因となるため、同じ背景画像内に配置し、反転させることが多いです。
注意: 画像のキャッシュがない場合、IE はホバー状態が変わるたびに新しいリクエストを生成します。とても悪いです。
2009-05-13 夕方に追記: 上記の説明は誤りです。より詳しい説明は続編を参照してください。反転テクニックはスプライト テクノロジを参照します (例: test_7b.html)。これにより、IE6 でちらつきは発生しません。

8. JS の innerHTML 内の画像
<script type="text/javascript"> var el = document.createElement('div'); el.innerHTML = '<img src="1.jpg" />'; //document.body.appendChild(el); </script> テスト: test_8.html
結論: Opera だけがすぐに画像を要求しません。
注意: Opera は、リクエストが DOM ツリーに追加された場合にのみリクエストを送信します。

9. 画像のプリロード
最も一般的に使用されるのは JS ソリューションです。

1. Opera は、非表示要素の非表示画像や背景のリクエストを生成しません。
2. Firefox は、非表示の要素の背景に対するリクエストも生成しません。
3. Opera は、DOM ツリーにまだ挿入されていない img 要素に対するリクエストを生成しません。
4. Webkit エンジンをベースにした Safari と Chrome は複数の背景画像をサポートします。
5. その他のシナリオでは、すべての主要ブラウザは一貫性を保ちます。
画像リクエストの処理に関しては、Opera が最先端にあると個人的には思います。

余分な

1. Fiddler を使用して Opera を監視する場合、それがローカル サーバーである場合は、Opera のプロキシ サーバー設定でローカル サーバーを確認する必要があります。

2. HTTP リクエストの数を確認するもう 1 つの確実な方法は、Apache access.log ファイルを直接確認することです。

3. Firefox が、繰り返し画像と繰り返し背景に対して重複したリクエストを生成します。すべての拡張機能を無効にしましたが、問題は依然として存在します。詳細を知っている方がいらっしゃいましたら、お知らせください。