4.下面我們試試用Javascript插入圖片
代碼：
<!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" /> <script src="script/main.js"></script> </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 id="script1"> </div> <div id="script2"> </div> <div> <div id="cssContainer1"> <div id="cssContainer2" style="background-image: url('images/Css2.jpg')"> </div> <script>inputImage("script2", "images/Script2.JPG")</script> <div id="cssContainer3"> </div> <script>inputImage("script1", "images/Script1.JPG")</script> </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>
inputImage方法是把一張圖片插入一個Div中：
function inputImage(divid, imgpath) { var divImage = document.getElementById(divid); divImage.innerHTML = '<img src="' + imgpath + '" />'; }
IE7+HttpWatch：
這種情況用第三節的結論很容易說明：在<script>inputImage("script2", "images/Script2.JPG")</script>處，先執行腳本，加載圖片Script2，然後加載在Script2之前的圖片Css5（Css5是在外部Css文件中聲明的，修飾的是cssContainer1的背景圖片，由於後面還有內聯的Style，所以這裏Css5被IEAbort了）以及Css2，之後執行<script>inputImage("script1", "images/Script1.JPG")</script> 加載圖片Script1，然後加載在Script1之前的圖片Css3。接下來順序加載內嵌圖片以及背景圖片。
FF3.0+Firebug
這裏可以看到與IE不同，Firefox是先加載背景圖片再加載腳本插入的圖片。結合第三節，可以認爲Firefox把腳本插入的圖片和背景圖片作爲相同加載順序權值的圖片看待，它們之間的加載順序按照在頁面上出現的先後安排。
但有時在IE下會出現下面的情況：
這是什麼原因呢？
第二段代碼：
<!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" /> <script src="script/main.js"></script> </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 id="script1"> </div> <div id="script2"> </div> <div> <div id="cssContainer1"> <div id="cssContainer2" style="background-image: url('images/Css2.jpg')"> </div> <script>inputImage("script2", "images/Script2.JPG")</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> <script>window.onload = function() { inputImage("script1", "images/Script1.JPG"); }</script> <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>
這裏onload閃亮登場，看錶現：
FF3.0+Firebug
很明顯，放在onload事件里加載的圖片被放在最後才加載，這也很好理解。
IE7+HttpWatch：
IE表現出了多樣性，不得不認爲，對於IE來說，Script標籤是個不穩定因素，它的影響是確定的，但影響的結果是不定的……