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 相关文章推荐
jQuery Tips 为AJAX回调函数传递额外参数的方法
Dec 28 Javascript
JavaScript自定义DateDiff函数(兼容所有浏览器)
Mar 01 Javascript
firefox下jQuery UI Autocomplete 1.8.*中文输入修正方法
Sep 19 Javascript
页面装载js及性能分析方法介绍
Mar 21 Javascript
javascript作用域问题实例分析
Jul 13 Javascript
jquery实现Slide Out Navigation滑出式菜单效果代码
Sep 07 Javascript
浅谈js函数中的实例对象、类对象、局部变量(局部函数)
Nov 20 Javascript
JS表单数据验证的正则表达式(常用)
Feb 18 Javascript
基于JavaScript实现的插入排序算法分析
Apr 14 Javascript
详解如何在Angular中快速定位DOM元素
May 17 Javascript
浅析Vue 生命周期
Jun 21 Javascript
在HTML中使用JavaScript的两种方法
Dec 24 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 调试环境(IIS+PHP+MYSQL)
2007/01/10 PHP
浅谈discuz密码加密的方式
2014/05/22 PHP
PHP实现的连贯操作、链式操作实例
2014/07/08 PHP
PHP中isset与array_key_exists的区别实例分析
2015/06/02 PHP
PHP文件生成的图片无法使用CDN缓存的解决方法
2015/06/20 PHP
ThinkPHP自定义函数解决模板标签加减运算的方法
2015/07/03 PHP
ThinkPHP中Common/common.php文件常用函数功能分析
2016/05/20 PHP
PHP数据库操作三:redis用法分析
2017/08/16 PHP
PHP实现的最大正向匹配算法示例
2017/12/19 PHP
详解php用static方法的原因
2018/09/12 PHP
thinkPHP框架实现的简单计算器示例
2018/12/07 PHP
jQuery select的操作实现代码
2009/05/06 Javascript
HTML页面滚动时获取离页面顶部的距离2种实现方法
2013/09/05 Javascript
Javascript表格翻页效果的具体实现
2013/10/05 Javascript
Js 获取当前函数参数对象的实现代码
2016/06/20 Javascript
基于百度地图实现产品销售的单位位置查看功能设计与实现
2016/10/21 Javascript
详解使用angular的HttpClient搭配rxjs
2017/09/01 Javascript
解决vue-router在同一个路由下切换,取不到变化的路由参数问题
2018/09/01 Javascript
在vue项目中优雅的使用SVG的方法实例详解
2018/12/03 Javascript
Vue指令之 v-cloak、v-text、v-html实例详解
2019/08/08 Javascript
JS指定音频audio在某个时间点进行播放
2020/11/28 Javascript
[50:27]OG vs LGD 2018国际邀请赛淘汰赛BO3 第一场 8.26
2018/08/30 DOTA
详解Python修复遥感影像条带的两种方式
2020/02/23 Python
使用OpenCV对车道进行实时检测的实现示例代码
2020/06/19 Python
Django Auth用户认证组件实现代码
2020/10/13 Python
Collection和Collections的区别
2016/05/02 面试题
室内设计实习自我鉴定
2013/09/25 职场文书
小学优秀班干部事迹材料
2014/05/25 职场文书
植树节口号
2014/06/21 职场文书
终止或解除劳动合同及劳动关系的证明书
2014/10/06 职场文书
2015年百日安全活动总结
2015/03/26 职场文书
公司放假通知范文
2015/04/14 职场文书
2015年教师教学工作总结
2015/04/28 职场文书
女性健康讲座主持词
2015/07/04 职场文书
2016大学军训心得体会
2016/01/11 职场文书
Golang 获取文件md5校验的方法以及效率对比
2021/05/08 Golang