關於IE中image的onload事件失效解決問題

這兩天做一個簡單的圖片查看器，其中用到了“上一頁”和“下一頁”，載入圖片的時候用new Image()，然後設定image的src屬性，在Google Chrome/Opera/FireFox中一切正常；代碼如下：

1 var i = new Image();2 i.src = _this.settings.imgs[_this.currIndex];3 //baidu.dom.show(baidu.dom.query(selectPre+'#loading')[0]);4 i.onload = function(){5     image.src = i.src;6     baidu.dom.hide(baidu.dom.query(selectPre+'#loading')[0]);7     baidu.dom.query('#'+_this.settings.formId+' .title')[0].innerHTML = i.src.replace(/(.*\/)/ig,'') + ' - '+_this.settings.title;8 }

測試結果：

可是到了IE8/IE7中，問題出現了：當所有圖片一次翻完或者重新整理瀏覽器後，點擊後圖片就 不顯示了，下面是重新整理後的結果(紅色的圖片是loading表徵圖)：

難道是Image對象的onload失效了？當我試圖在onload事件中彈出對話方塊時，IE中無效，也就證實了onload事件沒有發生。網上搜尋了下資料：

IE在再次顯示圖片的時候不是從伺服器發來的圖片，而是從緩衝中擷取上次緩衝的，這樣從緩衝中載入的速度是很快的，所以還沒有運行到onload的時候，onload事件已經觸發了，這就導致onload事件中的代碼無法執行了。

既然這樣，那我們就可以把onload事件函數寫到給src賦值的語句前面，這樣就解決了問題，代碼如下：

var i = new Image();//baidu.dom.show(baidu.dom.query(selectPre+'#loading')[0]);i.onload = function(){    image.src = i.src;    //baidu.dom.hide(baidu.dom.query(selectPre+'#loading')[0]);    //baidu.dom.query('#'+_this.settings.formId+' .title')[0].innerHTML = i.src.replace(/(.*\/)/ig,'') + ' - '+_this.settings.title;}      i.src = _this.settings.imgs[_this.currIndex];

嘿嘿，實際中遇到了一些奇怪的問題，記錄一下。