IE瀏覽器中圖片onload事件無效的解決方法
故事模式實現是只加載當前瀏覽的照片和它下面的兩張照片,加載照片的時候才會加載和渲染評論區(qū),圖片沒有加載前會用一個一象素的圖片占位,并用一個loading類將顯示出一個loading背景圖,判斷在可視區(qū)的時候替換成真正的圖片,圖片加載成功后刪除loading類。
問題出在最后面,測試的時候發(fā)現在IE下loading類無法刪除,當時代碼如下:
img.src = _src;
img.src = _src;
img.onload = function(){
_con.delClass('loading');
}
網上找了一番,onload和定義src的語句應該換一下順序,IE從緩存中取圖片,onload根本不觸發(fā),opera也有這個毛病,正確代碼修改如下
img.onload = function(){
_con.delClass('loading');
};
img.src = _src;
立即就正常了
結論:應該把onload寫到src前面,先告訴瀏覽器圖片加載完要怎么處理,再讓它去加載圖片。 所以,不是IE瀏覽器不會觸發(fā)onload事件,而是因為加載緩沖區(qū)的速度太快,在沒有告訴它加載完要怎么辦時,它已經加載完了。反過來說,firefox明顯更智能一些,加入onload事件后,firefox瀏覽器會檢測緩沖區(qū)是否已經有此圖片,有的話直接就觸發(fā)此事件!