理解网页图片加载顺序与浏览器差异-优快云博客

本文深入探讨了网页图片加载顺序及其在不同浏览器（如FF与IE）中的表现差异，强调了JavaScript对图片加载顺序的影响，并提出了优化加载顺序的建议。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最后一段代码：

<! 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 >
         < div >
             < div id ="cssContainer1" >
                 < div id ="cssContainer2" style ="background-image:url('images/Css2.JPG')" ></ div >
                 < script > for(var i=0;i<1000;i++){var a++} </ 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 >
         < 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 >
         < style >
        #cssContainer1{
            background-image:url("images/Css1.JPG");
        }
         </ style >
     </ body >
</ html >

其中style.css文件做了一些调整，变成:

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

这部分代码和之前的差异，一是用一个新的Div套住了cssContainer1、cssContainer4和一个普通的Div4。另外在外联的css文件中，重复定义了cssContainer1的背景图片，另一个定义在Html文档的最末端。

FF3.0+FireBug:

到这里基本可以总结出来，与IE不同，FF遵守的是另一套DIV逐级解析的模式。受Script影响的不仅仅是Script之前的图片，还包括了包含Script的父级标签内的所有图片。在同级中，图片的加载顺序符合先内嵌、后背景的原则，而不同级，则按由近及远的顺序加载，即，先加载Script同级的所有图片，再加载Script父级的所有图片，直到最外围的Body。

此外，看下IE：

注意其中那个Result字段为Abort的CSS5.jpg图片。原本由于外联CSS优先级最低，CSS5.jpg应当被后定义的内联CSS1.jpg覆盖，不被加载，但由于Javascript的影响，这里被加载了，虽然由于IE很快读到了HTML的末端，发现了后定义的CSS1.jpg，取消了CSS5.jpg的加载。但如果网速较慢，HTML文档或Javascript的执行时间较长，CSS5.jpg可能在很晚甚至全部加载完时才被取消，而在FireFox中，似乎没有Abort的操作，CSS5.jpg正是被完全加载了。

这给我们的启示是：

1.如果有必须放在背景中的图片，又希望它们能及早加载，那么在之后添加一个Script标签也许是一个好主意。

2.IE和FF的加载顺序不同，为了适应不同的浏览器，需要注意DIV的结构。

3.即使后来会被忽略，在浏览器解析文档时，也有可能加载并不需要甚至错误的背景图片，所以在设置不同级别的CSS样式时，要注意。比较好的做法，当然是把所有的样式都定义在外联文件中，贯彻样式和内容相分离的原则。

注：

Script标签对图片加载的影响和网络情况以及Script本身执行时长有关。当把页面放在本地服务器上测试时，一个空的Script标签甚至不会对图片的加载顺序产生影响，图片依然按照前两节的顺序加载。而网络越慢，或者Script执行时间越长（在本地服务器，一般需要万次以上的循环），Script对图片加载顺序的影响越明显。

体验新版博客