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 相关文章推荐
ExtJS4给Combobox设置列表中的默认值示例
May 02 Javascript
jQuery实现渐变下拉菜单的简单方法
Mar 11 Javascript
javascript中call和apply的用法示例分析
Apr 02 Javascript
js实现简单选项卡与自动切换效果的方法
Apr 10 Javascript
js实现温度计时间样式代码分享
Aug 21 Javascript
JavaScript数据绑定实现一个简单的 MVVM 库
Apr 08 Javascript
微信小程序 标签传入数据
May 08 Javascript
vue2.0在table中实现全选和反选的示例代码
Nov 04 Javascript
react实现菜单权限控制的方法
Dec 11 Javascript
JS实现滑动插件
Jan 15 Javascript
vue实现图片懒加载的方法分析
Feb 05 Javascript
详解vue 组件注册
Nov 20 Vue.js
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中Date获取时间不正确怎么办
2008/06/05 PHP
typecho插件编写教程(三):保存配置
2015/05/28 PHP
PHP 信号管理知识整理汇总
2017/02/19 PHP
PHP钩子与简单分发方式实例分析
2017/09/04 PHP
php 使用ActiveMQ发送消息,与处理消息操作示例
2020/02/23 PHP
javascript中的float运算精度实例分析
2010/08/21 Javascript
window.addEventListener来解决让一个js事件执行多个函数
2012/12/26 Javascript
杨氏矩阵查找的JS代码
2013/03/21 Javascript
javascript使用call调用微信API
2014/12/15 Javascript
使用javaScript动态加载Js文件和Css文件
2015/10/24 Javascript
javascript下拉列表中显示树形菜单的实现方法
2015/11/17 Javascript
简单介绍JavaScript数据类型之隐式类型转换
2015/12/28 Javascript
angularjs下拉框空白的解决办法
2017/06/20 Javascript
js表单序列化判断空值的实例
2017/09/22 Javascript
浅谈JsonObject中的key-value数据解析排序问题
2017/12/06 Javascript
webpack构建的详细流程探底
2018/01/08 Javascript
vue短信验证性能优化如何写入localstorage中
2018/04/25 Javascript
原生JavaScript创建不可变对象的方法简单示例
2020/05/07 Javascript
关于vue 项目中浏览器跨域的配置问题
2020/11/10 Javascript
[02:58]献给西雅图的情书_高清
2014/05/29 DOTA
[28:42]Ti4正赛VG vs NEWBEE1
2014/07/19 DOTA
使用python将mdb数据库文件导入postgresql数据库示例
2014/02/17 Python
简单的通用表达式求10乘阶示例
2014/03/03 Python
在pandas中一次性删除dataframe的多个列方法
2018/04/10 Python
python矩阵转换为一维数组的实例
2018/06/05 Python
Python实现随机漫步功能
2018/07/09 Python
深入学习python多线程与GIL
2019/08/26 Python
Python单元测试与测试用例简析
2019/11/09 Python
CSS3中的注音对齐属性ruby-align用法指南
2016/07/01 HTML / CSS
Agoda西班牙:全球特价酒店预订
2017/06/03 全球购物
GIVENCHY纪梵希官方旗舰店:高定彩妆与贵族护肤品
2018/04/16 全球购物
Conforama瑞士:家具、厨房、电器、装饰
2020/09/06 全球购物
护理自荐信
2013/10/22 职场文书
五四青年节优秀演讲稿范文
2014/05/28 职场文书
开学典礼观后感
2015/06/15 职场文书
SpringBoot连接MySQL获取数据写后端接口的操作方法
2021/11/02 MySQL