CSS を使用してフロントエンド画像の HTTP リクエストを制御する方法

Web フロントエンド画像はさまざまな方法でロードされ、生成される HTTP リクエストも異なります。ここでは、フロントエンド画像の HTTP リクエストを制御する CSS のさまざまな例をリストします。必要な場合は、画像の

HTTP リクエストを参照してください。 、様々な状況がありますが、どのような場合にリクエストが発生しないのでしょうか？以下に、http 画像リクエストをより深く理解するのに役立つことを願って、使用例を 1 つずつリストします。

1. 隠し画像

<img src="haorooms.jpg" style="display: none" />

http リクエストは次のとおりです:

結論: Opera だけがリクエストを生成しません。 注: Visibility: hidden を使用して画像を非表示にすると、Opera でもリクエストが生成されます。

2. 重複した画像

<img src="haorooms.jpg" />
<img src="haorooms.jpg" />

http リクエストは次のとおりです:

結論: すべてのブラウザは 1 つのリクエストのみを生成します。

3. バックグラウンドでの繰り返し

<style type="text/css">   
    .test1 { background: url(haorooms.jpg) }   
    .test2 { background: url(haorooms.jpg) }   
</style>   
<p class="test1">test1</p>   
<p class="test2">test2</p>

http リクエストは次のとおりです:

結論: すべてのブラウザは 1 つのリクエストのみを生成します。

4. 存在しない要素の背景

<style type="text/css">   
    .test1 { background: url(haorooms.jpg) }   
    .test2 { background: url(http2.jpg) } /* 页面中没有class为test2的元素 */
</style>   
<p class="test1">test1</p>

http リクエストは次のとおりです:

結論: バックグラウンドリクエストは、適用された要素がページ内に存在する場合にのみ生成されます。これは CSS フレームワークにとっては理にかなっています。

5. 要素の背景を非表示にする

<style type="text/css">   
    .test1 { background: url(haorooms.jpg); display: none; }   
    .test2 { background: url(http2.jpg); visibility: hidden; }   
</style>   

<p class="test1">test1</p>

http リクエストは次のとおりです:

結論: Opera と Firefox は、display: none で非表示にした要素の背景に対する HTTP リクエストを生成しません。背景画像は、これらの要素が表示されない場合にのみ要求されます: none。

6. 複数の背景

<style type="text/css">   
    .test1 { background: url(haorooms.jpg); }   
    .test1 { background: url(http2.jpg); }   
</style>   
<p class="test1">test1</p>

上記のコードの http リクエストは、画像 http2.jpg のみをリクエストします。その理由は、test1 のクラスが上記の画像を上書きし、後者の画像のみをリクエストするためです。

CSS3 で複数の背景画像の記述方法を使用する場合:

<style type="text/css">   
    .test1 { background-image:url("haorooms.jpg"),url("http2.jpg"); }   
</style>   
<p class="test1">test1</p>

その後、http リクエストは次のようになります:

Webkit エンジンのブラウザは、CSS3 で複数の背景画像をサポートしているため、背景画像を要求します。

7. hover

<style type="text/css">   
    a.test1 { background: url(haorooms.jpg); }   
    a.test1:hover { background: url(http2.jpg); }   
</style>   
<a href="#" class="test1">test1</a>

http リクエストのバックグラウンド読み込みは次のとおりです:

結論: ホバー状態のバックグラウンドは、ホバーがトリガーされた場合にのみ要求されます。トリガーされない場合は、デフォルトの背景画像のみが要求されます。

8. JS の innerHTML

<script type="text/javascript">   
    var el = document.createElement(&#39;p&#39;);   
    el.innerHTML = &#39;<img src="haorooms.jpg" />&#39;;   
    //document.body.appendChild(el); 
</script>

http リクエストの画像は次のとおりです:

結論: Opera だけが画像をすぐにリクエストしません。

注: Opera は、DOM ツリーに追加された場合にのみリクエストを送信します。

9. 画像のプリロード

最も一般的に使用されるソリューションは JS です:

<script type="text/javascript">   
    new Image().src = &#39;haorooms.jpg&#39;;   
    new Image().src = &#39;http2.jpg&#39;;   
</script>

JS がサポートされていない環境では、非表示の要素を使用してプリロードできます:

<img src="haoroomscom.jpg" style="visibility: hidden; height: 0; width: 0" />

概要

1 隠し画像と非表示の場合要素の背景がない場合、Opera はリクエストを行いません。
2. Firefox は非表示要素の背景に対するリクエストを生成しません。 3. Opera は、DOM ツリーに挿入されていない img 要素に対するリクエストを生成しません。
4. Webkit エンジンに基づく Safari と Chrome は複数の背景画像をサポートします。
5. 他のシナリオでは、すべての主要なブラウザーは同じままです。
上の写真の http リクエストがお役に立てば幸いです。誰もがメッセージを残してお互いにコミュニケーションをとることができます!

上記がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連する推奨事項:

CSSを使用して右側の固定幅と左側の幅を実装するアダプティブな方法について

HTMLとCSSを使用してコーネルノートのテンプレートを実装する

以上がCSS を使用してフロントエンド画像の HTTP リクエストを制御する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。