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

Web front-end picture loading in a variety of ways, and the resulting HTTP requests are also different, here we will enumerate the CSS control front-end picture HTTP request of various situations examples, the need for friends can refer to the next

Image HTTP request, there are a lot of situations, then what is the situation below the request does not happen? Here are some examples of what I would like to do to help you get an insight into HTTP image requests.

1. Hide Images

The HTTP request is as follows:

Conclusion: Only opera does not produce a request. Note: When you hide a picture with Visibility:hidden, a request is made under opera.

2. Duplicate pictures

The HTTP request is as follows:

Conclusion: All browsers produce only one request.

3. Repeating the 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>

The HTTP request is as follows:

Conclusion: All browsers produce only one request.

4. Background of non-existent elements

<style type= "Text/css" >       . test1 {Background:url (haorooms.jpg)}       . test2 {Background:url (http2.jpg)}/* page There is no element of class test2 in the Polygon */</style>   <p class= "Test1" >test1</p>

The HTTP request is as follows:

Conclusion: The background only generates a request when the applied element is present in the page. This is very meaningful for the CSS framework.

5. Hide the background of an element

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

The HTTP request is as follows:

Conclusion: Opera and Firefox do not generate HTTP requests for the background of elements hidden with display:none. The background picture is requested only if the elements are non-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 above code HTTP request, only request http2.jpg this picture, because Test1 class to the above to cover out, all only request a picture behind!

If you use CSS3 multiple background images of the wording:

<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 requests the background map because it supports multi-background graphs in the CSS3.

7. Hover Background Loading

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

The HTTP request is as follows:

Conclusion: The background of the hover state is only requested when the hover is triggered. If not triggered, only the default background image is requested.

8. js in the innerHTML picture

<script type= "Text/javascript" >       var el = document.createelement (' P ');       el.innerhtml = '  ';       Document.body.appendChild (EL); </script>

The HTTP request is as follows:

Conclusion: Only opera will not request images immediately.

Note: Opera sends a request when it is added to the DOM tree.

9. Pre-loading images
The most common is the JS scheme:

<script type= "Text/javascript" >       new Image (). src = ' haorooms.jpg ';       New Image (). src = ' http2.jpg ';   </script>

In an environment without JS support, a hidden element can be used to pre-load:

Summarize
1. Opera does not create a request for the background of hidden images and hidden elements.
2, for the background of hidden elements, Firefox will not produce a request.
3. Opera does not create a request for an IMG element that has not yet been inserted into the DOM tree.
4, based on WebKit engine Safari and chrome, support multi-background map.
5, other scenarios, all major browsers remain consistent.
Hope that the above image HTTP request to you some help, we can talk to each other message!

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!