软件开发培训班 >> 编程开发 >> JavaScript


IE6,IE7下js动态加载图片不显示错误

　　本文标签：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，从此就再也没出现这样的问题了 。