HTML页面元素加载顺序研究报告（二…

2、接下来考察背景图片的加载：

一般来说，添加背景图片有三种办法：

1.直接写在标签的style里面，如：

< div  style ="background-image:url('images/Css.JPG')" ></ div >

2.写在内联的style定义里面，如：

< style >
#cssContainer1 {
background-image : url("images/Css3.JPG") ;
}
</ style >

3.写在外联的css文件里。

其实这三种方法本质是一样的，都是写在了样式表里，而不是直接作为Html页面中的一个元素。

那么下面来看看下这种写在样式表里的背景图片和普通img标签里的背景图片加载时有什么不同：

代码：

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
     < head >
         < title > 测试图片加载顺序 </ title >
     </ head >
     < body >
         < div  id ="div1" >< img  src ="images/Div1.jpg"   /></ div >
         < div  id ="div2" >< img  src ="images/Div2.jpg"   /></ div >
         < div  id ="div3" >< img  src ="images/Div3.jpg"   /></ div >
         < div  style ="background-image:url('images/Css1.JPG')" ></ div >
         < div  id ="div4" >< img  src ="images/Div4.jpg"   /></ div >
         < div  id ="div5" >< img  src ="images/Div5.jpg"   /></ div >
         < div  id ="div6" >< img  src ="images/Div6.jpg"   /></ div >
         < div  id ="div7" >< img  src ="images/Div7.jpg"   /></ div >
         < div  id ="div8" >< img  src ="images/Div8.jpg"   /></ div >
         < div  id ="div9" >< img  src ="images/Div9.jpg"   /></ div >
         < div  id ="div10" >< img  src ="images/Div10.jpg"   /></ div >
         < div  id ="div11" >< img  src ="images/Div11.jpg"   /></ div >
         < div  id ="div12" >< img  src ="images/Div12.jpg"   /></ div >
     </ body >
</ html >

在第三张普通加载的图片之后，放置了一个设置背景图片的div。

 

IE7+HttpWatch：

 

FF3.0+FireBug:

可以看到，虽然所在的div是第四个，但作为背景图片的“imageInCss.JPG” 却是最后才被加载。

 

这段代码会看得更清楚：

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
     < head >
         < title > 测试图片加载顺序 </ title >
         < link  rel ="stylesheet"  href ="css/style.css"   />
     </ head >
     < body >
         < style >
            #cssContainer1 {
                background-image : url("images/Css1.JPG") ;
             }
         </ style >
         < div  id ="div1" >< img  src ="images/Div1.jpg"   /></ div >
         < div  id ="div2" >< img  src ="images/Div2.jpg"   /></ div >
         < div  id ="div3" >< img  src ="images/Div3.jpg"   /></ div >
         < div  id ="cssContainer1"  style ="background-image:url('images/Css5.JPG')" >
             < div  id ="cssContainer2"  style ="background-image:url('images/Css2.JPG')" ></ div >
             < div  id ="cssContainer3"  style ="background-image:url('images/Css3.JPG')" ></ div >
             < div  id ="cssContainer4" ></ div >
         </ div >
         < div  id ="div4" >< img  src ="images/Div4.jpg"   /></ div >
         < div  id ="div5" >< img  src ="images/Div5.jpg"   /></ div >
         < div  id ="div6" >< img  src ="images/Div6.jpg"   /></ div >
         < div  id ="div7" >< img  src ="images/Div7.jpg"   /></ div >
         < div  id ="div8" >< img  src ="images/Div8.jpg"   /></ div >
         < div  id ="div9" >< img  src ="images/Div9.jpg"   /></ div >
         < div  id ="div10" >< img  src ="images/Div10.jpg"   /></ div >
         < div  id ="div11" >< img  src ="images/Div11.jpg"   /></ div >
         < div  id ="div12" >< img  src ="images/Div12.jpg"   /></ div >
     </ body >
</ html >

 

其中，外联的CSS文件代码是：

#cssContainer4 {
    background-image : url("../images/Css4.JPG") ;
}

 

页面中引入了四个具有背景图片的Div，两个是通过直接定义的style，一个是通过外联的css文件，而cssContainer1则通过内联的style和直接定义的style双重声明了。而且cssContainer1这个div包含了其余三个div。测试结果如下：
IE7+HttpWatch：

 

FF3.0+FireBug:

可以看到，背景图片都在最后加载，而且它们的的加载顺序是imageInCss5 -> imageInCss2-> imageInCss3 -> imageInCss4，其中被双重定义的另一张背景图片imageInCss3并没有被加载。

它们的加载顺序正好与它们所对应的Div的顺序相同，而与它们的style定义放置在Html中的位置无关。这里所说的Div的顺序，以Div的起始标签为准。

 

背景图片最后加载的原因，个人理解，应该是因为其实无论是外联的css文件还是内联的或者直接定义的style，在Html中都会被视为一个整体，而且按照由外及内，由先到后的顺序依次解析。浏览器会在把所有样式，包括外联的css文件都下载解析完成之后才开始渲染样式，而且会自动忽略会被覆盖的样式表。

 

那么这给我们的一个重要启示是，在一个单纯由Html和Css组成的页面中，背景图片总是最后加载的，那么假若我们想要使用较小的背景图片作为占位符，用于在加载较大的图片或者Flash文件时给用户以提示，大部分时候恐怕是达不到效果的，因为背景图片有时甚至会在大图片或Flash文件加载完成之后才会被加载。

当然，这里一个重要的先决条件就是“单纯由Html和Css组成的页面”，因为JavaScript会对页面元素的加载产生极大影响，而具体情况会在下一节详述。

体验新版博客