Shulou(Shulou.com)06/03 Report--

This article mainly introduces "what are the HTTP request methods of pictures". In the daily operation, I believe that many people have doubts about the HTTP request methods of pictures. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful for you to answer the doubts of "what are the HTTP request methods of pictures?" Next, please follow the editor to study!

Please open the test page in the mainstream browser and view the http request in Fiddler.

1. Hide the picture

Test: test_1.html

Conclusion: only Opera does not generate a request.

Note: when you hide a picture with visibility: hidden, a request will also be made under Opera.

two。 Repeat picture

Test: test_2.html

Conclusion: all browsers generate only one request.

3. Repeat background

.test1 {background: url (1.jpg)} .test2 {background: url (1.jpg)} test1test2 Test: test_3.html

Conclusion: all browsers generate only one request.

4. The background of an element that does not exist

.test1 {background: url (1.jpg)} .test2 {background: url (2.jpg)} / * there is no element where class is test2 * / test1 Test: test_4.html

Conclusion: the background generates a request only if the applied element exists on the page. This makes a lot of sense for the CSS framework.

5. Hide the background of the element

.test1 {background: url (1.jpg); display: none;} .Test2 {background: url (2.jpg); visibility: hidden;} test1 Test: test_5.html

Conclusion: Opera and Firefox do not generate HTTP requests for element backgrounds hidden with display: none. The background image is requested only if these elements are not display: none.

6. Multiple backgrounds

.test1 {background: url (1.jpg);} .test1 {background: url (2.jpg);} test1 Test: test_6.html

Conclusion: except for Safari and Chrome based on the webkit rendering engine, other browsers will only request a background image.

Note: webkit engine browsers request background images because they support multiple background images in CSS3.

7. Background loading of hover

A.test1 {background: url (1.jpg);} a.test1:hover {background: url (2.jpg);} test1 Test: test_7.html

Conclusion: the background in the hover state is requested only when hover is triggered. This causes flicker, so it is often placed in the same background image by flipping.

Note: in the case of image no-cache, every time the hover status of IE changes, a new request will be generated. It's bad.

2009-05-13 night add: the above explanation is wrong, please refer to the sequel for a more detailed explanation. The flip technique refers to Sprite technology, for example: test_7b.html, which does not produce flicker under ie6.

8. Pictures in innerHTML in JS

Var el = document.createElement ('div'); el [XSS _ clean] ='

'; / / document.body.appendChild (el); Test: test_8.html

Conclusion: only Opera will not request a picture right away.

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

9. Picture preloading

The most commonly used is the JS scheme:

The code is as follows:

New Image () .src = '1.jpgdeclare; new Image () .src =' 2.jpgsink; in an environment without JS support, hidden elements can be used to preload:

Test: test_9.html

At this point, the study of "what are the HTTP request methods for pictures" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.