1. 首頁 > 生活經驗 > >

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

先描述一下出現這種匪夷所思bug的背景：
我在頁面加載的時候加載一堆小縮略圖，a href="javascript:void(0);" onclick="switch_image(’1.jpg’)"img src="https://www.questions.com.cn/dnjc/1.thumb.jpg" //a
這么多小的縮略圖標簽循環平鋪下來，當單擊小的圖片時，動態加載大的圖片顯示 ， 就類似于淘寶的商品查看圖片 。頁面上有一個標簽：
div id="pic-box"img src="" id="big-image" //div
為了節省流量 ， 加快頁面載入速度，先不加載大圖，當用戶單擊小圖時，動態加載一張大圖顯示 。
復制代碼 代碼如下:
script
function switch_image(im)
{
document.getElementById(’big-image’).src=https://www.questions.com.cn/dnjc/im;
}
/script

這種方式在IE6,7外所有的瀏覽器工作都正常，比如 IE8,Firefox, Opera, chrome, Safari 。。。
就是IE6,7這兩個瀏覽器加載不了，單擊小圖的時候 ， 有時候你能加載，有時候加載一半，有時候不能加載 。
我以為問題出在src這個東西上面，有可能IE6,7修改src不能正確加載圖片，于是嘗試把切換函數修改為：
document.getElementById(’pic-box’).innerHTML=’img src="https://www.questions.com.cn/dnjc/’im’" /’;
IE6,7還是不行，于是想，有可能是圖片被緩存了 ， 那么加上隨機數：
document.getElementById(’pic-box’).innerHTML=’img src="https://www.questions.com.cn/dnjc/’im’?r=’Math.random()’" /’;
IE6,7依然不行 。。
于是在想 ， 可能是img用在innerHTML里面出現的問題，所以 ， 改成用 appendChild
var img = document.createElement(’img’);
img.src= https://www.questions.com.cn/dnjc/im;
document.getElementById(’pic-box’).appendChild(img);
還是不行 。
再修改成用 new image來：

var img = new Image();
img.src= https://www.questions.com.cn/dnjc/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=https://www.questions.com.cn/dnjc/#"這樣使用a標簽的話并不能阻止a標簽最后觸發一個什么行為，
導致ie6會錯誤的認為頁面刷新或者重定向了，并且中斷了當前所有連接，這樣新圖片的加載就被aborted了 。
當然這些吃飽了沒事兒干的老外們也提出了各種匪夷所思復雜無比的解決方案 。

最簡單的方法有兩個，一個是這樣使用a標簽a href="https://www.questions.com.cn/dnjc/switch_image(); return false;"，另外一個就是用div替換a標簽來用 。

實際上我發現不僅是IE6，IE7也同樣有這個bug，還有，采用：a href="https://www.questions.com.cn/dnjc/switch_image(); return false;"并不能解決問題 。

所以推薦用其他標簽替換a標簽，最后一怒之下把所有的a標簽替換為span，從此就再也沒出現這樣的問題了 。您可能感興趣的文章:Jquery.LazyLoad.js修正版下載 ， 實現圖片延遲加載插件JS實現圖片預加載無需等待關于JS判斷圖片是否加載完成且獲取圖片寬度的方法jquery插件lazyload.js延遲加載圖片的使用方法js或者jquery判斷圖片是否加載完成實現代碼js 實現圖片預加載(js操作 Image對象屬性complete ，事件onload 異步加載圖片)網頁圖片延時加載的js代碼基于jquery的圖片懶加載jsjs圖片延遲加載的實現方法及思路js實現圖片在未加載完成前顯示加載中字樣Jquery圖片延遲加載插件jquery.lazyload.js的使用方法js 加載時自動調整圖片大小javascript預加載圖片、css、js的方法示例介紹JavaScript仿淘寶頁面圖片滾動加載及刷新回頂部的方法解析

相關經驗推薦