日本免费全黄少妇一区二区三区-高清无码一区二区三区四区-欧美中文字幕日韩在线观看-国产福利诱惑在线网站-国产中文字幕一区在线-亚洲欧美精品日韩一区-久久国产精品国产精品国产-国产精久久久久久一区二区三区-欧美亚洲国产精品久久久久

  1. 首頁(yè) > 云知道 > >

IE6,IE7下js動(dòng)態(tài)加載圖片不顯示錯(cuò)誤

云知道

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

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

var img = new Image();
img.src= https://www.rkxy.com.cn/dnjc/im;
document.getElementById(’pic-box’).appendChild(img);
還是不行 。
百思不得其解，想，難道IE6,7不能動(dòng)態(tài)加載圖片嗎？難道是img標(biāo)簽的問(wèn)題？
既然這樣就換成背景圖加載吧，于是
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到的一篇說(shuō)明：

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

最簡(jiǎn)單的方法有兩個(gè)，一個(gè)是這樣使用a標(biāo)簽a href="https://www.rkxy.com.cn/dnjc/switch_image(); return false;"，另外一個(gè)就是用div替換a標(biāo)簽來(lái)用 。

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

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

推薦閱讀