ie6,7下js動態加載圖片不顯示錯誤
先描述一下出現這種匪夷所思bug的背景:
我在頁面加載的時候加載一堆小縮略圖,<a href="javascript:void(0);" onclick="switch_image('1.jpg')"><img src="1.thumb.jpg" /></a>
這麼多小的縮略圖標籤循環平鋪下來,當單擊小的圖片時,動態加載大的圖片顯示,就相似於淘寶的商品查看圖片。頁面上有一個標籤:
<div id="pic-box"><img src="" id="big-image" /></div>
爲了節省流量,加快頁面載入速度,先不加載大圖,當用戶單擊小圖時,動態加載一張大圖顯示。
<script>
function switch_image(im)
{
document.getElementById('big-image').src=im;
}
</script>
這種方式在IE6,7外全部的瀏覽器工做都正常,好比 IE8,Firefox, Opera, chrome, Safari。。。
就是IE6,7這兩個瀏覽器加載不了,單擊小圖的時候,有時候你能加載,有時候加載一半,有時候不能加載。
我覺得問題出在src這個東西上面,有可能IE6,7修改src不能正確加載圖片,因而嘗試把切換函數修改成:
document.getElementById('pic-box').innerHTML='<img src="' + im + '" />';
IE6,7仍是不行,因而想,有多是圖片被緩存了,那麼加上隨機數:
document.getElementById('pic-box').innerHTML='<img src="' + im + '?r=' + Math.random() + '" />';
IE6,7依然不行。。
因而在想,多是img用在innerHTML裏面出現的問題,因此,改爲用 appendChild
var img = document.createElement('img');
img.src= im;
document.getElementById('pic-box').appendChild(img);
仍是不行。
再修改爲用 new image來:
var img = new Image();
img.src= im;
document.getElementById('pic-box').appendChild(img);
仍是不行。
百思不得其解,想,難道IE6,7不能動態加載圖片嗎?難道是img標籤的問題?
既然這樣就換成背景圖加載吧,因而
document.getElementById('pic-box').style.background="url(" + im + ")";
IE6,7依然不行,上面這麼多方法除IE6,7外其餘都是正常的。
只有不停的Google,結果google到了:
IE6,7只有在用<a onclick="switch_image()" href="javascript:void(0);"></a>這樣
動態加載圖片是纔會出現這種狀況,google到的一篇說明:
有幾個吃飽了沒事兒乾的老外反覆試驗發現這個問題是ie6中一個底層機制的bug,以後的版本已經解決了。
聽說<a href="javascript:void(0)">或者<a href=#">這樣使用a標籤的話並不能阻止a標籤最後觸發一個什麼行爲,
致使ie6會錯誤的認爲頁面刷新或者重定向了,而且中斷了當前全部鏈接,這樣新圖片的加載就被aborted了。
固然這些吃飽了沒事兒乾的老外們也提出了各類匪夷所思複雜無比的解決方案。
最簡單的方法有兩個,一個是這樣使用a標籤<a href="switch_image(); return false;">,另一個就是用div替換a標籤來用。
實際上我發現不只是IE6,IE7也一樣有這個bug,還有,採用:<a href="switch_image(); return false;">並不能解決問題。
因此推薦用其餘標籤替換a標籤,最後一怒之下把全部的a標籤替換爲span,今後就再也沒出現這樣的問題了。javascript