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 相关文章推荐
向fckeditor编辑器插入指定代码的方法
May 25 Javascript
JS 无法通过W3C验证的处理方法
Mar 09 Javascript
Jquery + Ajax调用webService实例代码(asp.net)
Aug 27 Javascript
将list转换为json失败的原因
Dec 17 Javascript
Android中的jQuery:AQuery简介
May 06 Javascript
Javascript获取随机数的实现方法
Jun 22 Javascript
js实现返回顶部效果
Mar 10 Javascript
bootstrap fileinput组件整合Springmvc上传图片到本地磁盘
May 11 Javascript
JS实现在文本指定位置插入内容的简单示例
Dec 22 Javascript
使用Vue如何写一个双向数据绑定(面试常见)
Apr 20 Javascript
浅谈angular2子组件的事件传递(任意组件事件传递)
Sep 30 Javascript
node中使用log4js4.x版本记录日志的方法
Aug 20 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和ACCESS写聊天室(十)
2006/10/09 PHP
PHP IN_ARRAY 函数使用注意事项
2010/07/24 PHP
360通用php防护代码(使用操作详解)
2013/06/18 PHP
PHP实现Soap通讯的方法
2014/11/03 PHP
Laravel5中Cookie的使用详解
2017/05/03 PHP
PHP实现的mysql主从数据库状态检测功能示例
2017/07/20 PHP
PHP实现浏览器中直接输出图片的方法示例
2018/03/14 PHP
javascript 多级checkbox选择效果
2009/08/20 Javascript
node.js中的fs.writeSync方法使用说明
2014/12/15 Javascript
基于jQuery实现以手风琴方式展开和折叠导航菜单
2016/01/28 Javascript
JavaScript 2048 游戏实例代码(简单易懂)
2016/03/25 Javascript
借助node实战JSONP跨域实例
2017/03/30 Javascript
详解Angular 4.x NgIf 的用法
2017/05/22 Javascript
JS 设置Cookie 有效期 检测cookie
2017/06/15 Javascript
Vue项目中quill-editor带样式编辑器的使用方法
2017/08/08 Javascript
利用yarn代替npm管理前端项目模块依赖的方法详解
2017/09/04 Javascript
实现div内部滚动条滚动到底部和顶部的代码
2017/11/15 Javascript
原生JavaScript实现Ajax异步请求
2017/11/19 Javascript
VUE 配置vue-devtools调试工具及安装方法
2018/09/30 Javascript
Vue表单之v-model绑定下拉列表功能
2019/05/14 Javascript
Element Notification通知的实现示例
2020/07/27 Javascript
学习python的几条建议分享
2013/02/10 Python
Python获取网页上图片下载地址的方法
2015/03/11 Python
Python实现GUI学生信息管理系统
2020/04/05 Python
Python学习之Django的管理界面代码示例
2018/02/10 Python
python批量解压zip文件的方法
2019/08/20 Python
关于Numpy数据类型对象(dtype)使用详解
2019/11/27 Python
在echarts中图例legend和坐标系grid实现左右布局实例
2020/05/16 Python
实例代码讲解Python 线程池
2020/08/24 Python
Lululemon加拿大官网:加拿大知名体育服装零售商
2019/04/12 全球购物
2014法制宣传日活动总结
2014/07/09 职场文书
党员教师群众路线对照检查材料思想汇报
2014/09/29 职场文书
上下班时间调整通知
2015/04/23 职场文书
贫困证明书范文
2015/06/16 职场文书
和领导吃饭祝酒词
2015/08/11 职场文书
Python first-order-model实现让照片动起来
2022/06/25 Python