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 相关文章推荐
asp.net和asp下ACCESS的参数化查询
Jun 11 Javascript
jquery中dom操作和事件的实例学习-表单验证
Nov 30 Javascript
jQuery filter函数使用方法
May 19 Javascript
php常见的页面跳转方法汇总
Apr 15 Javascript
js过滤HTML标签完整实例
Nov 26 Javascript
浅谈JavaScript中面向对象的的深拷贝和浅拷贝
Aug 01 Javascript
bootstrapValidator自定验证方法写法
Dec 01 Javascript
深入理解javascript函数参数与闭包
Dec 12 Javascript
教你一步步用jQyery实现轮播器
Dec 18 Javascript
laravel5.4+vue+element简单搭建的示例代码
Aug 29 Javascript
Layui表格行工具事件与数据回填方法
Sep 13 Javascript
小程序实现横向滑动日历效果
Oct 21 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的ob_start();控制您的浏览器cache!
2006/11/25 PHP
PHP迭代与递归实现无限级分类
2017/08/28 PHP
jquery.validate分组验证代码
2011/03/17 Javascript
jQuery使用技巧简单汇总
2013/04/18 Javascript
jQuery中prev()方法用法实例
2015/01/08 Javascript
JavaScript中模拟实现jsonp
2015/06/19 Javascript
jQuery实现带分组数据的Table表头排序实例分析
2015/11/24 Javascript
jQuery实现网页顶部固定导航效果代码
2015/12/24 Javascript
50 个 jQuery 插件可将你的网站带到另外一个高度
2016/04/26 Javascript
jQuery简单实现仿京东分类导航层效果
2016/06/07 Javascript
详解Vue.js组件可复用性的混合(mixin)方式和自定义指令
2017/09/06 Javascript
node.js多个异步过程中判断执行是否完成的解决方案
2017/12/10 Javascript
vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法
2018/09/05 Javascript
Element InputNumber计数器的使用方法
2020/07/27 Javascript
Vue SPA 首屏优化方案
2021/02/26 Vue.js
Python文件夹与文件的操作实现代码
2014/07/13 Python
Python使用random.shuffle()打乱列表顺序的方法
2018/11/08 Python
使用python将多个excel文件合并到同一个文件的方法
2019/07/09 Python
python web框架中实现原生分页
2019/09/08 Python
python 利用已有Ner模型进行数据清洗合并代码
2019/12/24 Python
python使用for...else跳出双层嵌套循环的方法实例
2020/05/17 Python
Python实现网络聊天室的示例代码(支持多人聊天与私聊)
2021/01/27 Python
HTML5 3D书本翻页动画的实现示例
2019/08/28 HTML / CSS
高街生活方式全球在线商店:AZBRO
2017/08/26 全球购物
ESDlife健康生活易:身体检查预订、搜寻及比较
2019/05/10 全球购物
英国高级健康和美容产品零售商:Life and Looks
2019/08/01 全球购物
澳大利亚领先的女性运动服品牌:Lorna Jane
2020/06/19 全球购物
请说出几个常用的异常类
2013/01/08 面试题
试用期转正后的自我评价
2014/09/21 职场文书
务虚会发言材料
2014/12/25 职场文书
六年级语文下册教学计划
2015/01/22 职场文书
董存瑞观后感
2015/06/11 职场文书
2015年语言文字工作总结
2015/07/23 职场文书
2016年小学圣诞节活动总结
2016/03/31 职场文书
Java工作中实用的代码优化技巧分享
2022/04/21 Java/Android
Nginx限流和黑名单配置
2022/05/20 Servers