關(guān)于IE中image的onload事件失效解決問(wèn)題
來(lái)源:程序員人生 發(fā)布時(shí)間:2014-02-08 01:09:38 閱讀次數(shù):3933次
這兩天做一個(gè)簡(jiǎn)單的圖片查看器,其中用到了“上一頁(yè)”和“下一頁(yè)”,加載圖片的時(shí)候用new Image(),然后設(shè)置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;
}
測(cè)試結(jié)果:

可是到了IE8/IE7中,問(wèn)題出現(xiàn)了:當(dāng)所有圖片一次翻完或者刷新瀏覽器后,點(diǎn)擊后圖片就 不顯示了,下面是刷新后的結(jié)果(紅色的圖片是loading圖標(biāo)):

難道是Image對(duì)象的onload失效了?當(dāng)我試圖在onload事件中彈出對(duì)話框時(shí),IE中無(wú)效,也就證實(shí)了onload事件沒(méi)有發(fā)生。網(wǎng)上搜索了下資料:
IE在再次顯示圖片的時(shí)候不是從服務(wù)器發(fā)來(lái)的圖片,而是從緩存中獲取上次緩存的,這樣從緩存中加載的速度是很快的,所以還沒(méi)有運(yùn)行到onload的時(shí)候,onload事件已經(jīng)觸發(fā)了,這就導(dǎo)致onload事件中的代碼無(wú)法執(zhí)行了。
既然這樣,那我們就可以把onload事件函數(shù)寫(xiě)到給src賦值的語(yǔ)句前面,這樣就解決了問(wèn)題,代碼如下:
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];