资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划，从策略到执行的一站式服务

网站建设 >

查看其它板块

Web中怎么加载图片资源

Web中怎么加载图片资源，很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。

创新互联于2013年创立，先为福田等服务建站，福田等地企业，进行企业商务咨询服务。为福田企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

浏览器的工作流程

要研究图片资源的加载和渲染，我们先要了解浏览器的工作原理。以Webkit引擎的工作流程为例：

Web中怎么加载图片资源

从上图可看出，浏览器加载一个HTML页面后进行如下操作：

  • 解析HTML —> 构建DOM树

  • 加载样式 —> 解析样式 —> 构建样式规则树

  • 加载javascript —> 执行javascript代码

  • 把DOM树和样式规则树匹配构建渲染树

  • 计算元素位置进行布局

  • 绘制

从上图我们不能很直观的看出图片资源从什么时候开始加载，下图标出图片加载和渲染的时机：

  • 解析HTML【遇到标签加载图片】 —> 构建DOM树

  • 加载样式 —> 解析样式【遇到背景图片链接不加载】 —> 构建样式规则树

  • 加载javascript —> 执行javascript代码

  • 把DOM树和样式规则树匹配构建渲染树【加载渲染树上的背景图片】

  • 计算元素位置进行布局

  • 绘制【开始渲染图片】

图片加载与渲染规则

页面中不是所有的标签图片和样式表背景图片都会加载。

display:none

    

图片资源请求如下：

Web中怎么加载图片资源

设置了display:none属性的元素，图片不会渲染出来，但会加载。

原理

把DOM树和样式规则树匹配构建渲染树时，会把可渲染元素上的所有属性(如display:none属性和background-image属性)结合一起产出到渲染树。

当解析渲染树时会加载标签元素上的图片，发现元素上有background-image属性时会加载背景图片。

当绘制时发现元素上有display:none属性，则不计算该元素位置，也不会绘制该元素。

              
  

图片资源请求如下：

Web中怎么加载图片资源

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

原理

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

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

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

重复图片

.img-blue {      background-image: url(../image/blue.png);  }      

图片资源请求如下：

Web中怎么加载图片资源

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

原理

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

不存在元素的背景图片

.img-blue {      background-image: url(../image/blue.png);  }  .img-orange{      background-image: url(../image/orange.png);  }

图片资源请求如下：

Web中怎么加载图片资源

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

原理

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

伪类的背景图片

.img-green {      background-image: url(../image/green.png);  }  .img-green:hover{      background-image: url(../image/red.png);  }

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

Web中怎么加载图片资源

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

Web中怎么加载图片资源

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

原理

触发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. 鸿蒙官方战略合作共建——HarmonyOS技术社区

  2. 若是小图标，可以合并成雪碧图，在改变状态前就把所有图标都一起加载了。

  3. 使用上文讲到的，设置了display:none属性的元素，图片不会渲染出来，但会加载。把要预加载的图片加到设置了display:none的元素背景图或标签里。

  4. 在javascript创建img对象，把图片url设置到img对象的src属性里。 

看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注创新互联行业资讯频道，感谢您对创新互联的支持。


当前题目：Web中怎么加载图片资源
网站URL：http://www.cdkjz.cn/article/jdiodi.html
返回首页 了解更多建站资讯

相关资讯

多年建站经验

多一份参考，总有益处

联系快上网，免费获得专属《策划方案》及报价

咨询相关问题或预约面谈，可以通过以下方式与我们联系

大客户专线   成都：13518219792   座机：028-86922220

在线咨询 提交需求
友情链接 交换友情链接
沃尔沃发电机出租教育网站设计方案广汉锦华橡塑子晨包装重庆服务器托管成都网站制作公司成都机柜租用柴油发电机租赁绵阳网站制作公司德昌麦琪建站

成都网站建设公司地址：成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220

成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.

专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网！ | 成都网站建设哪家好？ | 网站建设地图