图片的HTTP请求总结,web图片http请求汇总,网页图片预加载

图片的http请求,有很多种情况,那么究竟什么情况下面不会发生请求呢?下面我用案例一一列举一下,希望对你深入了解http图片请求有所帮助。

1.隐藏图片

图片的HTTP请求总结,web图片http请求汇总,网页图片预加载_第1张图片
结论:只有Opera不产生请求。 注意:用visibility: hidden隐藏图片时,在Opera下也会产生请求

2.重复图片


图片的HTTP请求总结,web图片http请求汇总,网页图片预加载_第2张图片
所有浏览器都只产生一次请求

3.重复背景


test1
test2
图片的HTTP请求总结,web图片http请求汇总,网页图片预加载_第3张图片
结论:所有浏览器都只产生一次请求。

4. 不存在的元素的背景

    
test1
图片的HTTP请求总结,web图片http请求汇总,网页图片预加载_第4张图片
背景仅在应用的元素在页面中存在时,才会产生请求。这对CSS框架来说,很有意义。

5. 隐藏元素的背景



test1
图片的HTTP请求总结,web图片http请求汇总,网页图片预加载_第5张图片
结论:Opera和Firefox对于用display: none隐藏的元素背景,不会产生HTTP请求。 仅当这些元素非display: none时,才会请求背景图片。

6. 多重背景


test1

上面这段代码的http请求,只会请求http2.jpg这一张图片,原因是test1的class把上面的给覆盖掉了,所有只请求后面的一张图片!


test1
图片的HTTP请求总结,web图片http请求汇总,网页图片预加载_第6张图片
结论:webkit引擎浏览器对背景图都请求,是因为支持CSS3中的多背景图。

7. hover的背景加载


test1
图片的HTTP请求总结,web图片http请求汇总,网页图片预加载_第7张图片
结论:触发hover时,才会请求hover状态下的背景。不触发的话,只请求默认的背景图片。

8. JS里innerHTML中的图片


图片的HTTP请求总结,web图片http请求汇总,网页图片预加载_第8张图片
结论:只有Opera不会马上请求图片。 注意:当添加到DOM树上时,Opera才会发送请求

9. 图片预加载

最常用的是JS方案:


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

你可能感兴趣的:(图片的HTTP请求总结,web图片http请求汇总,网页图片预加载)