图片会产生HTTP请求的几种情况 | 图片预加载技术

图片会产生HTTP请求的几种情况

1. 只要是img src引用的都会请求；
2. 背景仅在应用的元素在页面中存在时，才会产生请求。
3. 重复图片/多个元素使用重复背景，只产生一次请求；
4. 隐藏元素的背景也会产生请求
5. 多重背景，只请求后面的一张图片
6. 触发hover时，才会请求hover状态下的背景；不触发的话，只请求默认的背景图片。

<style type="text/css">   
    /* 多个元素使用重复背景，只产生一次请求 */
    /* 隐藏元素的背景也会产生请求 */
    .test1 { background: url(haorooms.jpg); display: none; }   
    .test2 { background: url(haorooms.jpg); visibility: hidden; } 
    /* 多重背景,只请求后面的一张图片 */
    .test2 { background: url(haorooms.jpg);} 
    /* 不存在元素的背景不会产生请求 */
    .test3 { background: url(test3.jpg) }  
</style>   
<div class="test1">test1</div>   
<div class="test2">test2</div> 
<!-- 重复图片只产生一次请求 -->
<img src="haorooms.jpg" />  
<img src="haorooms.jpg" />  

注：以上情况针对大多数浏览器

图片预加载

• 最常用的是JS方案：

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

• 在无JS支持的环境下，可以采用隐藏元素来预加载：

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