【原】HTML页面元素加载顺序研究报告（2）----背景图片
2、接下來考察背景圖片的加載：
一般來說，添加背景圖片有三種辦法：
其實這三種方法本質是一樣的，都是寫在了樣式表里，而不是直接作為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> 在第三張普通加載的圖片之后，放置了一個設置背景圖片Css.Jpg的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，cssContainer2和cssContainer3的背景圖片是通過直接定義的style，cssContainer4的背景圖片是通過外聯的css文件定義，而cssContainer1的背景圖片則通過內聯的style和直接定義的style雙重聲明了。而且cssContainer1這個div包含了其余三個div。測試結果如下：
IE7+HttpWatch：
?
FF3.0+FireBug:
可以看到，無論何種形式，背景圖片都在最后加載。而且它們的的加載順序是Css5 -> Css2-> Css3 -> Css4，其中被雙重定義的另一張背景圖片Css1并沒有被加載。
那么我們可以得到如下的結論：
那么這給我們的一個重要啟示是：在一個單純由Html和Css組成的頁面中，背景圖片總是最后加載的，假若我們想要使用較小的背景圖片作為占位符，用于在加載較大的圖片或者Flash文件時給用戶以提示，大部分時候恐怕是達不到效果的，因為背景圖片有時甚至會在大圖片或Flash文件加載完成之后才會被加載。
當然，這里一個重要的先決條件就是“單純由Html和Css組成的頁面”，因為JavaScript會對頁面元素的加載產生極大影響，而具體情況會在下一節詳述。
轉載于:https://www.cnblogs.com/smjack/archive/2008/08/21/1272905.html
總結
以上是生活随笔為你收集整理的【原】HTML页面元素加载顺序研究报告（2）----背景图片的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 没了良心
- 下一篇： 有关css和js针对不同浏览器兼容的问题