script

那么现在我们可以看出几点：

1.无论对IE还是FF，Javascript确实对图片的加载顺序有影响，原本应该在最后加载的背景图片会在Javascript执行时加载。
2.加载不会解析Javascript之后定义的CSS，从第一段代码中可以看到，CSS1.jpg并没有被提前加载，因为它的内联定义放在了后面。
3.IE只对Javascript之前的背景图片提前加载，Javascript之后的图片，还是按照先内嵌，后背景的顺序，无论Div的结构如何。而FF的情况会复杂一些。

 

看下下面的代码：

<! 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 >
         < div  id ="cssContainer4"  style ="background-image:url('images/Css4.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 >

这里将原本包含在cssCotainer1这个div里的cssContainer4放到了外面。IE下的表现没有变化，看下FF的反应：

图片CSS4.jpg被放到了最后加载，而CSS3.jpg虽然也是在Script之后才定义的，却被提前加载了。现在我们可以猜想，在FF中，图片的加载顺序在Javascript的影响下，同时与Div的结构有关。

 

体验新版博客