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


Posted in Javascript onJuly 17, 2010

先描述一下出现这种匪夷所思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 相关文章推荐
一个符号插入器 中用到的js代码
Sep 04 Javascript
用javascript作一个通用向导说明
Aug 30 Javascript
javascript 3d 逐侦产品展示(核心精简)
Mar 26 Javascript
js实现点击图片改变页面背景图的方法
Feb 28 Javascript
jquery马赛克拼接翻转效果代码分享
Aug 24 Javascript
手机端 HTML5使用photoswipe.js仿微信朋友圈图片放大效果
Aug 25 Javascript
[Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能实例代码
Dec 20 Javascript
Material(包括Material Icon)在Angular2中的使用详解
Feb 11 Javascript
vue2.0项目实现路由跳转的方法详解
Jun 21 Javascript
基于vue实现圆形菜单栏组件
Jul 05 Javascript
原生js实现商品筛选功能
Oct 28 Javascript
微信小程序实现watch监听
Jun 04 Javascript
js模拟类继承小例子
Jul 17 #Javascript
javascript 循环读取JSON数据的代码
Jul 17 #Javascript
一个可绑定数据源的jQuery数据表格插件
Jul 17 #Javascript
js跨域问题之跨域iframe自适应大小实现代码
Jul 17 #Javascript
javascript下对于事件、事件流、事件触发的顺序随便说说
Jul 17 #Javascript
jQuery Select(单选) 模拟插件 V1.3.62 改进版
Jul 17 #Javascript
基于jquery的Repeater实现代码
Jul 17 #Javascript
You might like
PHP新手上路(五)
2006/10/09 PHP
PHP数组操作汇总 php数组的使用技巧
2011/07/17 PHP
php导出csv数据在浏览器中输出提供下载或保存到文件的示例
2014/04/24 PHP
PHP编程中尝试程序并发的几种方式总结
2016/03/21 PHP
PHP中常见的密码处理方式和建议总结
2018/10/14 PHP
JavaScript 面向对象编程(1) 基础
2010/05/18 Javascript
jquery无缝向上滚动实现代码
2013/03/29 Javascript
Knockout text绑定DOM的使用方法
2013/11/15 Javascript
Jquery 切换不同图片示例代码
2013/12/05 Javascript
js实现的点击数量加一可操作数据库
2014/05/09 Javascript
js实现选中页面文字将其分享到新浪微博
2015/11/05 Javascript
js点击按钮实现带遮罩层的弹出视频效果
2015/12/19 Javascript
基于javascript实现动态时钟效果
2020/08/18 Javascript
javascript断点调试心得分享
2016/04/23 Javascript
JavaScript中双符号的运算详解
2017/03/12 Javascript
Vue-cli proxyTable 解决开发环境的跨域问题详解
2017/05/18 Javascript
详解.vue文件中监听input输入事件(oninput)
2017/09/19 Javascript
Node.js实现注册邮箱激活功能的方法示例
2018/03/23 Javascript
解决vue中使用Axios调用接口时出现的ie数据处理问题
2018/08/13 Javascript
抖音上用记事本编写爱心小程序教程
2019/04/17 Javascript
为nuxt项目写一个面包屑cli工具实现自动生成页面与面包屑配置
2019/09/29 Javascript
Python 错误和异常小结
2013/10/09 Python
python进阶教程之循环相关函数range、enumerate、zip
2014/08/30 Python
python实现网页自动签到功能
2019/01/21 Python
在windows下使用python进行串口通讯的方法
2019/07/02 Python
python 批量添加的button 使用同一点击事件的方法
2019/07/17 Python
Python中关于浮点数的冷知识
2019/09/22 Python
Python  Asyncio模块实现的生产消费者模型的方法
2021/03/01 Python
阿联酋航空丹麦官方网站:Emirates DK
2019/08/25 全球购物
新奥尔良珠宝:Mignon Faget
2020/11/23 全球购物
开业庆典策划方案
2014/02/18 职场文书
禁毒宣传标语
2014/06/19 职场文书
大学生交通专业求职信
2014/09/01 职场文书
单位委托书怎么写
2014/09/21 职场文书
关于元旦的广播稿2016
2015/12/17 职场文书
Java异常处理try catch的基本用法
2021/12/06 Java/Android