员工查询

2012经典版官网 服务热线：4001-355-360  

• 首页
• 网站建设
• 新媒体营销
• 案例中心
• 深度合作
• 蓝韵口碑
• 关于我们
• 联系我们
• 新闻中心

 src="../image/pink.png" style="display:none">
 class="img-purple" style="display:none">

 style="display:none">
     src="../image/red.png">
     class="img-yellow">

图片资源请求如下：

设置了display:none属性元素的子元素，样式表中的背景图片不会渲染出来，也不会加载；而标签的图片不会渲染出来，但会加载。

原理

正如上面所说的，构建渲染树时，只会把可渲染元素产出到渲染树，这就意味有不可渲染元素，当匹配DOM树和样式规则树时，若发现一个元素的属性上有display:none，浏览器会认为该元素的子元素是不可渲染的，因此不会把该元素的子元素产出到渲染树上。

当解析渲染树时渲染树上没有设置了display:none属性元素的子元素，因此不会加载该元素中子元素的图片。

当绘制时也因为渲染树上没有设置了display:none属性元素的子元素，因此该元素中子元素不会渲染出来。

重复图片

.img-blue {
    background-image: url(../image/blue.png);
}
<div class="img-blue"></div>

图片资源请求如下：

页面中多个标签或样式表中的背景图片图片路径是同一个，图片只加载一次。

原理

浏览器请求资源时，都会先判断是否有缓存，若有缓存且未过期则会从缓存中读取，不会再次请求。先加载的图片会存储到浏览器缓存中，后面再次请求同路径图片时会直接读取缓存中的图片。

不存在元素的背景图片

.img-blue {
    background-image: url(../image/blue.png);
}
.img-orange{
    background-image: url(../image/orange.png);
}
<div class="img-orange">div>

图片资源请求如下：

不存在元素的背景图片不会加载。

原理

不存在的元素不会产出到DOM树上，因此渲染树上也不会有不存在的元素，当解析渲染树时无法解析不存在的元素，不存在的元素上的图片自然不会加载���不会渲染。

伪类的背景图片

.img-green {
    background-image: url(../image/green.png);
}
.img-green:hover{
    background-image: url(../image/red.png);
}
<div class="img-green">div>

触发hover前的图片资源请求如下：

触发hover后的图片资源请求如下：

当触发伪类的时候，伪类样式上的背景图片才会加载。

原理

触发hover前，DOM树与样式规则树匹配的是无hover状态选择器.img-green的样式，因此渲染树上background-image属性的值是url(../image/green.png)，解析渲染树时加载的是green.png，绘制时渲染的也是green.png。

触发hover后，因为.img-green:hover的优先级比较高，因此DOM树与样式规则树匹配的是有hover状态选择器.img-green:hover的样式，渲染树上background-image属性的值是url(../image/red.png)，解析渲染树时加载的是red.png，绘制时渲染的也是red.png。

应用

占位图

当使用样式表中的背景图片作为占位符时，要把背景图片转为base64格式。这是因为背景图片加载的顺序在标签后面，背景图片可能会在标签图片加载完成后才开始加载，达不到想要的效果。

预加载

很多场景里图片是在改变或触发状态后才显示出来的，例如点击一个Tab后，一个设置display:none隐藏的父元素变为显示，这个父元素里的子元素图片会在父元素显示后才开始加载；又如当鼠标hover到图标后，改变图标图片，图片会在hover上去后才开始加载，导致出现闪一下这种不友好的体验。

在这种场景下，我们就需要把图片预加载，预加载有很多种方式:

1.若是小图标，可以合并成雪碧图，在改变状态前就把所有图标都一起加载了。 
2.使用上文讲到的，设置了display:none属性的元素，图片不会渲染出来，但会加载。把要预加载的图片加到设置了display:none的元素背景图或标签里。 
3.在javascript创建img对象，把图片url设置到img对象的src属性里。

微信扫扫二维码
获得更多咨询服务

浙江省杭州市钱塘区六号大街新加坡科技园5幢9层
拱墅区兴业街金通数字科创园8栋2楼
宁波市鄞州区科技孵化园E503
湖州市吴兴区天蓝大厦309-311

007@lanyunwork.com

Copyright 2009- All Rights Reserved.蓝韵铁军
网站地图

杭州网站制作 网络推广公司 杭州网页设计 SEO

由浙江浙杭律师事务所提供品牌数字服务的法规支持

浙公网安备 33011802001661号

浙ICP备16016754号-2