CSS控制前端图片HTTP请求的各种例子
图片中有很多HTTP请求的情况，那么什么情况不会发生呢让我列举一个例子，我希望它能帮助您深入了解HTTP图片请求。1。隐藏图片
xml代码将内容复制到剪贴板。
HTTP请求如下：
结论：只有Opera不产生请求。注意：当使用可见性时，隐藏以隐藏图片，将在Opera下生成请求。
2。重复图片
xml代码将内容复制到剪贴板。
HTTP请求如下：
结论：所有浏览器只有一个请求。
三.重复的背景
CSS代码将内容复制到剪贴板。
。test1 {背景：URL（haorooms .jpg）}
。test2 {背景：URL（haorooms .jpg）}
test1
test2
HTTP请求如下：
结论：所有浏览器只有一个请求。
4。不存在元素的背景
CSS代码将内容复制到剪贴板。
。test1 {背景：URL（haorooms .jpg）}
URL。test2（http2.mm258.最新地址JPG）{背景：}没有类元素的test2 / *页
test1
HTTP请求如下：
结论：背景只在页面中应用元素存在时产生请求，这对于CSS框架是非常有意义的。
5。隐藏元素的背景
CSS代码将内容复制到剪贴板。
。test1 {背景：URL（haorooms .jpg）；显示：无；}
。test2 {背景：URL（http2.mm258.最新地址JPG）；能见度：隐藏；}
test1
HTTP请求如下：
结论：Opera和Firefox不生成隐藏在显示元素的背景中的HTTP请求：没有。只有当这些元素不显示时，才会要求背景图片。
6。多重背景
CSS代码将内容复制到剪贴板。
。test1 {背景：URL（haorooms .jpg）；}
。test1 {背景：URL（http2.mm258.最新地址JPG）；}
test1
上述代码的HTTP请求只会要求http2.jpg图片，因为test1类覆盖以上的，所有这些要求的照片背后。
如果CSS3写多背景图片：
CSS代码将内容复制到剪贴板。
。test1 {背景图像：URL（haorooms .jpg），URL（http2.mm258.最新地址jpg）；}
test1
然后HTTP请求如下所示：
WebKit引擎的浏览器请求的背景图，因为它支持多个背景图的CSS3。
7。在后台加载
CSS代码将内容复制到剪贴板。
a.test1 { background: url（haorooms .jpg）；}
a.test1：悬停{ background: url（http2.mm258.最新地址JPG）；}
test1
HTTP请求如下：
结论：当悬停触发时，将要求悬停状态的背景。如果没有触发，则只要求默认背景图片。
图片8。JS innerHTML
Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。
var el = document.createelement（'div）；
El.innerHTML = '';
/ / document.body.appendchild（EL）；
HTTP请求如下：
结论：只有Opera没有立即要求图片。
注意：Opera在添加到DOM树时发送请求。
9。图片加载
最常用的是js方案：
Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。
新的图像（）。src= 'haorooms .jpg；
新的图像（）。src= 'http2 .jpg；
在没有js支持的环境中，可以使用隐藏元素预加载：
CSS代码将内容复制到剪贴板。
总结
1。对于隐藏和隐藏元素的背景，Opera不产生请求。
2。对于隐藏元素的背景，Firefox不生成请求。
3、对于img元素还没有被插入到DOM树，歌剧不产生一个请求。
4。基于WebKit引擎和浏览器Safari支持多个背景图。
5。其他场景，所有主流浏览器都是一致的。
希望以上图片http请求帮助你，你可以互相沟通！