图片会产生HTTP请求的几种情况
- 只要是img src引用的都会请求;
- 背景仅在应用的元素在页面中存在时,才会产生请求。
- 重复图片/多个元素使用重复背景,只产生一次请求;
- 隐藏元素的背景也会产生请求
- 多重背景,只请求后面的一张图片
- 触发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" />