今天突然发现ie6浏览器动态写入图片时,图片路径是正确的,但就是不显示图片.
图片html已经插入到页面中,但是图片没有显示,IE7,火狐等浏览器都正常,要右键-“显示图片”,图片才显示,很奇怪的。
code如下:
function insertImg(o,id){
var imageUrl= PIC_PATH; //图片前缀
if (id < 0) {
return false;
}
$("#banks").css('display','none');
$("#imgBox").html('<img src="'+imageUrl+'/images/pic/'+id+'.gif" alt="'+o.title+'" />');
}
htm如下:
ul id="imgLIst" class="img-list clear">
<li><a href="javascript:;" onclick="insertImg(this, 1);" title="第一张图"><img src="http://www.xxxx.com/images/pic/1.gif" alt="第一张图"></a></li>
<li><a href="javascript:;" onclick="insertImg(this, 2);" title="第二张图"><img src="http://www.xxxx.com/images/banks/2.gif" alt="第二张图"></a></li>
</ul>
百度了下发现
这是IE6 一个底层机制的bug,是<a href="javascript:void(0)">或者<a href=#">这样使用a标签的话并不能阻止a标签最后触发一个什么行为,导致ie6会错误的认为页面刷新或者重定向了,并且中断了当前所有连 接,这样新图片的加载就被阻止了。
一看自己的,确实使用a标签触发事件的:<a href="javascript:void(null);" class="btn" id="insert_pic">插入图片</a>
将a标签改为其他标签,我就改成了属性相近的span标签,结果就ok了。
<span id="append_finish" class="append_finish">图片插入完毕!</span>
或者
<a onclick="javascript:fun();return false;">加return false</a>
修正后的htm如下:
ul id="imgLIst" class="img-list clear">
<li><a href="javascript:;" onclick="insertImg(this, 1);return false;" title="第一张图"><img src="http://www.xxxx.com/images/pic/1.gif" alt="第一张图"></a></li>
<li><a href="javascript:;" onclick="insertImg(this, 2);return false;" title="第二张图"><img src="http://www.xxxx.com/images/banks/2.gif" alt="第二张图"></a></li>
</ul>
图片能正常显示了 : )