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 相关文章推荐
Javascript 作用域使用说明
Aug 13 Javascript
JavaScript基础篇之变量作用域、传值、传址的简单介绍与实例
Jun 29 Javascript
可插入图片的TEXT文本框
Dec 27 Javascript
JavaScript事件委托用法分析
Jan 24 Javascript
解决jQuery上传插件Uploadify出现Http Error 302错误的方法
Dec 18 Javascript
JavaScript实现阿拉伯数字和中文数字互相转换
Jun 12 Javascript
JS上传图片预览插件制作(兼容到IE6)
Aug 07 Javascript
详解Vue中localstorage和sessionstorage的使用
Dec 22 Javascript
VUE在for循环里面根据内容值动态的加入class值的方法
Aug 12 Javascript
如何让微信小程序页面之间的通信不再变困难
Jun 03 Javascript
15个简单的JS编码标准让你的代码更整洁(小结)
Jul 16 Javascript
用javascript制作qq注册动态页面
Apr 14 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引用效率问题分析
2012/03/23 PHP
php+ajax注册实时验证功能
2016/07/20 PHP
一键生成各种尺寸Icon的php脚本(实例)
2017/02/08 PHP
php写入mysql中文乱码的实例解决方法
2019/09/17 PHP
js类中获取外部函数名的方法
2007/08/19 Javascript
js 多浏览器分别判断代码
2010/04/01 Javascript
JavaScript 事件系统
2010/07/22 Javascript
JQuery设置文本框和密码框得到焦点时的样式
2013/08/30 Javascript
JavaScript中的Math.SQRT1_2属性使用简介
2015/06/14 Javascript
js随机生成字母数字组合的字符串 随机动画数字
2015/09/02 Javascript
js实现跨域的多种方法
2015/12/25 Javascript
jQuery实现的简单百分比进度条效果示例
2016/08/01 Javascript
用AngularJS来实现监察表单按钮的禁用效果
2016/11/02 Javascript
js正则表达式惰性匹配和贪婪匹配用法分析
2016/12/26 Javascript
Vue绑定内联样式问题
2018/10/17 Javascript
webpack 如何解析代码模块路径的实现
2019/09/04 Javascript
python访问类中docstring注释的实现方法
2015/05/04 Python
请不要重复犯我在学习Python和Linux系统上的错误
2016/12/12 Python
twilio python自动拨打电话,播放自定义mp3音频的方法
2019/08/08 Python
python爬虫之遍历单个域名
2019/11/20 Python
TensorFlow tf.nn.conv2d实现卷积的方式
2020/01/03 Python
python下载的库包存放路径
2020/07/27 Python
浅谈python 类方法/静态方法
2020/09/18 Python
Pytorch - TORCH.NN.INIT 参数初始化的操作
2021/02/27 Python
你不知道的葡萄干处理法、橙蜜处理法、二氧化碳酵母法
2021/03/17 冲泡冲煮
阿里巴巴美国:Alibaba美国
2019/11/24 全球购物
美国滑板店:Tactics
2020/11/08 全球购物
当x.equals(y)等于true时,x.hashCode()与y.hashCode()可以不相等,这句话对不对
2015/05/02 面试题
岗位标兵事迹材料
2014/05/17 职场文书
群众路线个人对照检查材料
2014/09/23 职场文书
纪录片信仰观后感
2015/06/08 职场文书
2019个人工作态度自我评价
2019/04/24 职场文书
人生感悟经典句子
2019/08/20 职场文书
uni-app 微信小程序授权登录的实现步骤
2022/02/18 Javascript
RestTemplate如何通过HTTP Basic Auth认证示例说明
2022/03/17 Java/Android
Golang jwt身份认证
2022/04/20 Golang