IE6,IE7下js動態加載圖片不顯示錯誤

2019-11-21 00:21:04

字體：大中小

來源：轉載

供稿：網友

先描述一下出現這種匪夷所思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 瀏覽器驗證代碼(來自discuz)

下一篇：js模擬類繼承小例子