Web中怎么加载图片资源

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

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

浏览器的工作流程

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

Web中怎么加载图片资源

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

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

图片加载与渲染规则

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

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);  }