How to use CSS to control front-end image HTTP requests

There are many ways to load Web front-end images, and the HTTP requests they generate are also different. Here we will list various examples of CSS controlling HTTP requests for front-end images. Friends in need can refer to the following

There are many situations for http requests for images. So under what circumstances will a request not occur? Below I will list them one by one using cases, hoping it will be helpful for you to have a deeper understanding of http image requests.

1. Hidden pictures

<img  src="/static/imghwm/default1.png"  data-src="haorooms.jpg"  class="lazy"     style="max-width:90%" / alt="How to use CSS to control front-end image HTTP requests" >

http request is as follows:

Conclusion: Only Opera does not generate requests. Note: When hiding an image using visibility: hidden, a request will also be generated under Opera.

2. Duplicate images

<img  src="/static/imghwm/default1.png"  data-src="haorooms.jpg"  class="lazy"   / alt="How to use CSS to control front-end image HTTP requests" >
<img  src="/static/imghwm/default1.png"  data-src="haorooms.jpg"  class="lazy"   / alt="How to use CSS to control front-end image HTTP requests" >

http request is as follows:

Conclusion: All browsers only generate One request.

3. Repeat background

<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 request is as follows:

Conclusion: All browsers only generate One request.

4. Background of non-existent element

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

http request is as follows:

Conclusion: Background only The request is only made when the applied element exists on the page. This makes sense for CSS frameworks.

5. Hiding the background of elements

<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 request is as follows:

Conclusion: Opera and Firefox are for The background of an element hidden with display: none will not generate an HTTP request. A background image will only be requested if these elements are not display: none.

6. Multiple backgrounds

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

The http request of the above code will only request the image http2.jpg. The reason is that the class of test1 changes the above It’s overwritten, so we only request the next picture!

If you use css3 to write multiple background images:

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

Then the http request is as follows:

##The webkit engine browser handles background images All requested because it supports multiple background images in CSS3.

7. Background loading of 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 request is as follows:

Conclusion: When hover is triggered, Only then will the background in the hover state be requested. If not triggered, only the default background image is requested.

8. Pictures in innerHTML in JS

<script type="text/javascript">   
    var el = document.createElement(&#39;p&#39;);   
    el.innerHTML = &#39;<img  src="/static/imghwm/default1.png"  data-src="haorooms.jpg"  class="lazy"   / alt="How to use CSS to control front-end image HTTP requests" >&#39;;   
    //document.body.appendChild(el); 
</script>

http request is as follows:

Conclusion: Only Opera will not immediately Request pictures.

Note: Opera will only send the request when it is added to the DOM tree.

9. Image preloading
The most commonly used is the JS solution:

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

In an environment without JS support, hidden elements can be used to preload:

<img  src="/static/imghwm/default1.png"  data-src="haoroomscom.jpg"  class="lazy"     style="max-width:90%" / alt="How to use CSS to control front-end image HTTP requests" >

Summary
1. Opera will not generate requests for hidden pictures and backgrounds of hidden elements. 2. Firefox will not generate requests for the background of hidden elements.
3. Opera will not generate a request for img elements that have not been inserted into the DOM tree.
4. Safari and Chrome based on webkit engine support multiple background images.
5. In other scenarios, all mainstream browsers remain the same.
I hope the above image http request will be helpful to you, everyone can leave messages to communicate with each other!

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

About the adaptive method of css to achieve fixed width on the right and width on the left

Use html and css to implement Cornell note template

The above is the detailed content of How to use CSS to control front-end image HTTP requests. For more information, please follow other related articles on the PHP Chinese website!