ie6,7下js动态加载图片不显示错误
先描述一下出现这种匪夷所思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