先描述一下出現(xiàn)這種匪夷所思bug的背景：
我在頁面加載的時(shí)候加載一堆小縮略圖，<a href="javascript:void(0);" onclick="switch_image('1.jpg')"><img src="1.thumb.jpg" /></a>
這么多小的縮略圖標(biāo)簽循環(huán)平鋪下來，當(dāng)單擊小的圖片時(shí)，動(dòng)態(tài)加載大的圖片顯示，就類似于淘寶的商品查看圖片。頁面上有一個(gè)標(biāo)簽：
<div id="pic-box"><img src="" id="big-image" /></div>
為了節(jié)省流量，加快頁面載入速度，先不加載大圖，當(dāng)用戶單擊小圖時(shí)，動(dòng)態(tài)加載一張大圖顯示。

這種方式在IE6,7外所有的瀏覽器工作都正常，比如 IE8,Firefox, Opera, chrome, Safari。。。
就是IE6,7這兩個(gè)瀏覽器加載不了，單擊小圖的時(shí)候，有時(shí)候你能加載，有時(shí)候加載一半，有時(shí)候不能加載。
我以為問題出在src這個(gè)東西上面，有可能IE6,7修改src不能正確加載圖片，于是嘗試把切換函數(shù)修改為：
document.getElementById('pic-box').innerHTML='<img src="' + im + '" />';
IE6,7還是不行，于是想，有可能是圖片被緩存了，那么加上隨機(jī)數(shù)：
document.getElementById('pic-box').innerHTML='<img src="' + im + '?r=' + Math.random() + '" />';
IE6,7依然不行。。
于是在想，可能是img用在innerHTML里面出現(xiàn)的問題，所以，改成用 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不能動(dòng)態(tài)加載圖片嗎？難道是img標(biāo)簽的問題？
既然這樣就換成背景圖加載吧，于是
document.getElementById('pic-box').style.background="url(" + im + ")";
IE6,7依然不行，上面這么多方法除IE6,7外其他都是正常的。
只有不停的Google，結(jié)果google到了：
IE6,7只有在用<a onclick="switch_image()" href="javascript:void(0);"></a>這樣
動(dòng)態(tài)加載圖片是才會(huì)出現(xiàn)這種情況，google到的一篇說明：

有幾個(gè)吃飽了沒事兒干的老外反復(fù)試驗(yàn)發(fā)現(xiàn)這個(gè)問題是ie6中一個(gè)底層機(jī)制的bug，之后的版本已經(jīng)解決了。
據(jù)說<a href="javascript:void(0)">或者<a href=#">這樣使用a標(biāo)簽的話并不能阻止a標(biāo)簽最后觸發(fā)一個(gè)什么行為，
導(dǎo)致ie6會(huì)錯(cuò)誤的認(rèn)為頁面刷新或者重定向了，并且中斷了當(dāng)前所有連接，這樣新圖片的加載就被aborted了。
當(dāng)然這些吃飽了沒事兒干的老外們也提出了各種匪夷所思復(fù)雜無比的解決方案。

最簡單的方法有兩個(gè)，一個(gè)是這樣使用a標(biāo)簽<a href="switch_image(); return false;">，另外一個(gè)就是用div替換a標(biāo)簽來用。

實(shí)際上我發(fā)現(xiàn)不僅是IE6，IE7也同樣有這個(gè)bug，還有，采用：<a href="switch_image(); return false;">并不能解決問題。

所以推薦用其他標(biāo)簽替換a標(biāo)簽，最后一怒之下把所有的a標(biāo)簽替換為span，從此就再也沒出現(xiàn)這樣的問題了。

最新評(píng)論