解決IE中img.onload失效的方法
最近在做一個web專案，其中有一個需求：在服務端圖片未下載完成之前顯示另一個圖片，下載完成後才顯示此圖片，所以想到了img的onload方法，開發完成後，在firefox瀏覽器下沒有什麼問題，在IE下測試，發現img的onload事件很多情況下都不被呼叫。
我最初的程式碼如下：
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
var obj = new Image();
obj.src =
"http://dl.zhishi.sina.com.cn/upload/21/01/14/1172210114.4452029.jpg";
obj.onload = function()
{
$("img").attr('src',this.src);
alert(this.src);
}
</script>
<div
id="mypic"><img src="../images/loading.gif"
/></div>
這段程式碼看上去沒什麼問題，但是為什麼onload在ie下經常沒有被呼叫呢？因為瀏覽器會快取圖片，第2次載入的圖片，不是從伺服器上傳過來的，瀏覽器不會向服務端傳送請求，而是從緩衝區里加載的。是不是從緩衝區里加載的圖片就不觸發onload事件呢？但alert每次都是執行的，所以猜測是錯誤的，於是我把程式碼做了一下修改如下
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
var obj = new Image();
obj.onload =
function()
{
$("img").attr('src',this.src);
}
obj.src = "http://dl.zhishi.sina.com.cn/upload/21/01/14/1172210114.4452029.jpg";
</script><div id="mypic"><img src="../images/loading.gif" /></div>
我把onload事件寫到給imgage物件的src賦值之前了，先告訴瀏覽器如何處理這張圖片，再指定這張圖片的源，這樣就正常了。所以，不是IE瀏覽器沒有觸發onload事件，而是因為載入緩衝區的速度太快了，以至於沒有執行到obj.onload的時候，onload事件已經觸發了。