關于IE中image的onload事件失效解決問題
來源:程序員人生 發布時間:2014-02-08 01:09:38 閱讀次數:3925次
這兩天做一個簡單的圖片查看器,其中用到了“上一頁”和“下一頁”,加載圖片的時候用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];