CSS控制前端图片HTTP请求的情况

隐藏图片

<img src='xxx.jpg' style='display:none'>

结论：产生HTTP请求，此外使用visiblity：hidden的时候也会产生请求。

重复图片

<img src='xxx.jpg'>
<img src='xxx.jpg'>

结论：所有浏览器对重复的资源都只发出一次请求。

重复背景

<style>
    .test1{background:url(xxx.jpg)}
    .test2{background:url(xxx.jpg)}
</style>
<div class='test1'></div>
<div class='test2'></div>

结论：所有浏览器都只发出一次HTTP请求

不存在的元素的背景

<style>
    .test1{background:url(xxx.jpg)}
    .test2{background:url(xxx.png)}
</style>
<div class='test1'></div>

结论：背景仅在应用的元素在页面中存在的时候，才会发出请求。

隐藏元素的背景

<style>
    .test1{
        background:url(xxx.jpg);
        display:none;
    }
    .test2{background:url(xxx.png)}
</style>
<div class='test1'></div>

结论：Chrome会为display：none；的元素发出请求，但是fireFox和opera不会为display：none；的元素发出HTTP请求。

多重背景

<style>
    .test1{
        background:url(xxx.jpg);
    }
    .test1{background:url(xxx.png)}
</style>
<div class='test1'></div>

结论：因为下面的样式把上面的掩盖掉，所以只会发出一次HTTP请求。

hover的背景加载

<style>
    .test1{
        background:url(xxx.jpg);
    }
    .test1:hover{background:url(xxx.png)}
</style>
<div class='test1'></div>

结论：触发hover时，才会有对应的HTTP请求，如果没有触发，默认只会有请求默认的背景图片

JS中innerHTML中的图片

<script type="text/javascript">   
    var el = document.createElement('div');   
    el.innerHTML = '<img src="haorooms.jpg" />';   
</script>  

结论：只有Opera不会立刻发出请求，其余浏览器会发出HTTP请求。