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

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

var i = new Image();
i.src = _this.settings.imgs[_this.currIndex];
//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;
}

測試結果：

可是到了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];

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