IE6,IE7下js动态加载图片不显示错误
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了IE6,IE7下js动态加载图片不显示错误，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2433字，纯文字阅读大概需要4分钟。
内容图文
先描述一下出现这种匪夷所思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，从此就再也没出现这样的问题了。
内容总结
以上是互联网集市为您收集整理的IE6,IE7下js动态加载图片不显示错误全部内容，希望文章能够帮你解决IE6,IE7下js动态加载图片不显示错误所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】