script

其中style.css中的代码如下：

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

 

在应用了css样式设置背景图片的div中，加入了一段简单的Javascript脚本。

 

IE7+HttpWatch：

 

FF3.0+FireBug:

 

这里大概能够看出一些问题，再看下一段代码：

 

<! 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 >
         < 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 >
         < style >
        #cssContainer1{}{
            background-image:url("images/Css1.JPG");
        }
         </ style >
         < div  id ="cssContainer1" >
             < div  id ="cssContainer2"  style ="background-image:url('images/Css2.JPG')" ></ div >
             < script >
             </ script >
             < div  id ="cssContainer3" ></ div >
             < div  id ="cssContainer4"  style ="background-image:url('images/Css4.JPG')" ></ 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 >

相比第一段代码，这里把Script脚本简化为一对空的Script标签，而且把之前放在最后的内联style放到了script的前面。

 

IE7+HttpWatch：

 

FF3.0+FireBug:

 

体验新版博客