Measured image HTTP request

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

1. Hide the image
<img src="1.jpg" style="display: none" />Test: test_1.html
Conclusion: Only Opera does not generate requests.
Note: Hiding an image with visibility: hidden will also generate a request in Opera.

2. Repeat images
<img src="1.jpg" /><img src="1.jpg" />Test: test_2.html
Conclusion: All browsers make only one request.

3. Repeating Background
<style type="text/css"> .test1 { background: url(1.jpg) } .test2 { background: url(1.jpg) }</style><div class="test1">test1</div><div class="test2">test2</div>Test: test_3.html
Conclusion: All browsers make only one request.

4. Background of non-existent elements
<style type="text/css"> .test1 { background: url(1.jpg) } .test2 { background: url(2.jpg) } /* There is no element with class test2 in the page*/</style><div class="test1">test1</div>Test: test_4.html
Conclusion: Background will only generate a request when the applied element exists on the page. This makes sense for CSS frameworks.

5. Hide the background of an element
<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: test_5.html
Conclusion: Opera and Firefox do not generate HTTP requests for element backgrounds hidden with display: none. Background images are only requested if these elements are not display: none.

6. Multiple Backgrounds
<style type="text/css"> .test1 { background: url(1.jpg); } .test1 { background: url(2.jpg); }</style><div class="test1">test1</div>Test: test_6.html
Conclusion: Except for Safari and Chrome based on the webkit rendering engine, other browsers will only request one background image.
Note: WebKit browsers request all background images because they support multiple background images in CSS3.

7. Hover background loading
<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: test_7.html
Conclusion: When hover is triggered, the background in the hover state is requested. This can cause flickering, so it is often placed in the same background image and flipped.
Note: In the case of no-cache for images, IE will generate a new request every time the hover state changes. Very bad.
Supplement added on the evening of 2009-05-13: The above explanation is wrong. Please refer to the sequel for a more detailed explanation. The flip technique refers to the Sprite technology, example: test_7b.html, which will not produce flickering under IE6.

8. Images in innerHTML in JS
<script type="text/javascript"> var el = document.createElement('div'); el.innerHTML = '<img src="1.jpg" />'; //document.body.appendChild(el); </script> Test: test_8.html
Conclusion: Only Opera does not request images right away.
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:

1. Opera does not generate requests for hidden images and backgrounds of hidden elements.
2. Firefox also does not generate requests for the background of hidden elements.
3. Opera will not generate requests for img elements that have not yet been inserted into the DOM tree.
4. Safari and Chrome based on the webkit engine support multiple background images.
5. In other scenarios, all major browsers remain consistent.
When it comes to handling image requests, I personally think Opera is at the forefront.

Extra

1. When using Fiddler to monitor Opera, if it is a local server, you need to check the local server in Opera's proxy server settings.

2. Another foolproof way to check the number of HTTP requests is to directly check the Apache access.log file.

3. My Firefox generates duplicate requests for repeated images and repeated backgrounds. Disabled all extensions, the problem still exists. If anyone knows the details, please let me know.