前端图片HTTP请求的各种情况分析

示例一：隐藏图片

<img src="haorooms.jpg" style="display: none" />  
<img src="haorooms2.jpg" style="visibility: hidden" />

结论：display: none只有Opera不产生请求。 其他浏览器都会发送请求。
用visibility: hidden隐藏图片时，全部浏览器都会产生请求。

示例二：重复图片

<img src="haorooms.jpg" />  
<img src="haorooms.jpg" /> 

结论：所有浏览器都只产生一次请求 。

示例三：重复背景

<style type="text/css">
  .test1 {
        background: url(haorooms.jpg)
    }
    
    .test2 {
        background: url(haorooms.jpg)
    }
</style>

<div class="test1">test1</div>
<div class="test2">test2</div>

结论：所有浏览器都只产生一次请求。

示例四：不存在的元素的背景

<style type="text/css">
.test1 {
      background: url(haorooms.jpg)
  }
  
  .test2 {
      background: url(haorooms2.jpg)/* 页面中没有class为test2的元素 */ 
  }
</style>

<div class="test1">test1</div>

结论：背景仅在应用的元素在页面中存在时，才会产生请求。这对CSS框架来说，很有意义。

示例五：隐藏元素的背景

<style type="text/css">
	.test1 {
         background: url(haorooms.jpg);
         display: none;
     }
     
     .test2 {
         background: url(http2.jpg);
         visibility: hidden;
     }
</style>

<div class="test1">test1</div>
<div class="test2">test2</div>

结论：Opera、Firefox和Chrome对于用display: none隐藏的元素背景，不会产生HTTP请求。仅当这些元素非display: none时，才会请求背景图片。visibility: hidden隐藏的元素背景都会请求

示例六：多重背景

<style type="text/css">   
    .test1 { background: url(haorooms.jpg); }   
    .test1 { background: url(http2.jpg); }   
</style>   

<div class="test1">test1</div>

上面这段代码的http请求，只会请求http2.jpg这一张图片，原因是test1的class把上面的给覆盖掉了，所有只请求后面的一张图片！
但是CSS3的这种写法，就会发送两个请求。

<style type="text/css">   
    .test1 { background-image:url("haorooms.jpg"),url("http2.jpg"); }  
</style>   

<div class="test1">test1</div>

webkit引擎浏览器对背景图都请求，是因为支持CSS3中的多背景图。

示例七：hover的背景加载

<style type="text/css">   
    a.test1 { background: url(haorooms.jpg); }   
    a.test1:hover { background: url(http2.jpg); }   
</style>   
<a href="#" class="test1">test1</a>  

结论：触发hover时，才会请求hover状态下的背景，而且不论触发几次，只请求一次。不触发的话，只请求默认的背景图片。

示例八：JS里innerHTML中的图片

    var el = document.createElement('div');   
    el.innerHTML = '<img src="haorooms.jpg" />';   
    //document.body.appendChild(el);   

结论：只有Opera不会马上请求图片。其他浏览器都马上请求
注意：当添加到DOM树上时，Opera才会发送请求。

示例九：图片预加载

<style type="text/css">   
    a.test1 { background: url(haorooms.jpg); }   
    a.test1:hover { background: url(http2.jpg); }   
</style>   
<a href="#" class="test1">test1</a>  

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

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

总结

1、隐藏：对于display:none的隐藏图片会请求（除Opera），但背景不会，而visibility:hidden隐藏的元素都会请求。
2、重复背景：重复的图片请求一次，重复的背景请求一次，hover的背景触发才请求一次，不存在(或display:none)的元素背景不请求。
3、基于webkit引擎的Safari和Chrome，支持多背景图，会发送多个请求。
4、对于尚未插入DOM树的img元素，Opera不会产生请求。

参考自：https://www.jb51.net/css/469033.html

最后

以上就是快乐口红为你收集整理的前端图片HTTP请求的各种情况分析的全部内容，希望文章能够帮你解决前端图片HTTP请求的各种情况分析所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。