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 相关文章推荐
JS 文件本身编码转换 图文教程
Oct 12 Javascript
JS根据变量保存方法名并执行方法示例
Apr 04 Javascript
jquery中post方法用法实例
Oct 21 Javascript
jquery 操作css样式、位置、尺寸方法汇总
Nov 28 Javascript
JavaScript使用yield模拟多线程的方法
Mar 19 Javascript
javascript框架设计之类工厂
Jun 23 Javascript
jQuery实现的多张图无缝滚动效果【测试可用】
Sep 12 Javascript
BooStrap对导航条的改造实践小结
Sep 21 Javascript
详解npm 配置项registry修改为淘宝镜像
Sep 07 Javascript
基于jquery实现九宫格拼图小游戏
Nov 30 jQuery
使用vue-cli脚手架工具搭建vue-webpack项目
Jan 14 Javascript
解决Can't find variable: SockJS vue项目的问题
Sep 22 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
桌面中心(一)创建数据库
2006/10/09 PHP
php 静态页面中显示动态内容
2009/08/14 PHP
关于zend studio 出现乱码问题的总结
2013/06/23 PHP
对PHP PDO的一些认识小结
2015/01/23 PHP
PHP快速排序quicksort实例详解
2016/09/28 PHP
PHP fopen函数用法实例讲解
2019/02/15 PHP
jQuery(1.6.3) 中css方法对浮动的实现缺陷分析
2011/09/09 Javascript
js弹出窗口之弹出层的小例子
2013/06/17 Javascript
弹出窗口并且此窗口带有半透明的遮罩层效果
2014/03/13 Javascript
JavaScript 动态加载脚本和样式的方法
2015/04/13 Javascript
通过实例理解javascript中没有函数重载的概念
2015/06/03 Javascript
浅析四种常见的Javascript声明循环变量的书写方式
2015/10/14 Javascript
Bootstrap每天必学之进度条
2015/11/30 Javascript
Bootstrap媒体对象学习使用
2017/03/07 Javascript
JavaScript对象的浅拷贝与深拷贝实例分析
2018/07/25 Javascript
小程序开发基础之view视图容器
2018/08/21 Javascript
微信小程序实现人脸识别登陆的示例代码
2019/04/02 Javascript
基于JavaScript实现单例模式
2019/10/30 Javascript
用 Python 连接 MySQL 的几种方式详解
2018/04/04 Python
Window 64位下python3.6.2环境搭建图文教程
2018/09/19 Python
对python指数、幂数拟合curve_fit详解
2018/12/29 Python
Python使用mongodb保存爬取豆瓣电影的数据过程解析
2019/08/14 Python
Python 中pandas索引切片读取数据缺失数据处理问题
2019/10/09 Python
利用django创建一个简易的博客网站的示例
2020/09/29 Python
python GUI计算器的实现
2020/10/09 Python
HTML5 本地存储 LocalStorage详解
2016/06/24 HTML / CSS
美国女士内衣在线折扣商店:One Hanes Place
2019/03/24 全球购物
全球最受追捧的运动服品牌领先数字目的地:Stylerunner
2020/11/25 全球购物
奥利奥广告词
2014/03/20 职场文书
品牌宣传方案
2014/03/21 职场文书
先进教育工作者事迹材料
2014/12/23 职场文书
初中家长评语大全
2014/12/26 职场文书
商务宴请邀请函范文
2015/02/02 职场文书
团支部组织委员竞选稿
2015/11/21 职场文书
学校2016年九九重阳节活动总结
2016/04/01 职场文书
建立共青团委员会的请示
2019/04/02 职场文书