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构造器的实现代码小结
May 16 Javascript
非常强大的 jQuery.AsyncBox 弹出对话框插件
Aug 29 Javascript
JavaScript中的单引号和双引号报错的解决方法
Sep 01 Javascript
jQuery实现checkbox全选的方法
Jun 10 Javascript
javascript 定时器工作原理分析
Dec 03 Javascript
js数组与字符串常用方法总结
Jan 13 Javascript
jquery版轮播图效果和extend扩展
Jul 18 jQuery
ES6中Array.find()和findIndex()函数的用法详解
Sep 16 Javascript
webpack 动态批量加载文件的实现方法
Mar 19 Javascript
vue实现把接口单独存放在一个文件方式
Aug 13 Javascript
基于openlayers实现角度测量功能
Sep 28 Javascript
一小时迅速入门Mybatis之bind与多数据源支持 Java API
Sep 15 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
10个超级有用值得收藏的PHP代码片段
2015/01/22 PHP
php取得字符串首字母的方法
2015/03/25 PHP
PHP解压tar.gz格式文件的方法
2016/02/14 PHP
PHP实现微信退款的方法示例
2019/03/26 PHP
PHP mkdir创建文件夹实现方法解析
2020/11/13 PHP
JS特权方法定义作用以及与公有方法的区别
2013/03/18 Javascript
Web跨浏览器进程通信(Web跨域)
2013/04/17 Javascript
JavaScript中为什么null==0为false而null大于=0为true(个人研究)
2013/09/16 Javascript
JS是按值传递还是按引用传递
2015/01/30 Javascript
JavaScript获取网页支持表单字符集的方法
2015/04/02 Javascript
bootstrap模态框消失问题的解决方法
2016/12/02 Javascript
详解js的六大数据类型
2016/12/27 Javascript
JavaScript 数据类型详解
2017/03/13 Javascript
nodejs制作爬虫实现批量下载图片
2017/05/19 NodeJs
详解vuex 中的 state 在组件中如何监听
2017/05/23 Javascript
vue移动端轻量级的轮播组件实现代码
2018/07/12 Javascript
详解Vue中CSS样式穿透问题
2019/09/12 Javascript
vue结合el-upload实现腾讯云视频上传功能
2020/07/01 Javascript
Vue + Element-ui的下拉框el-select获取额外参数详解
2020/08/14 Javascript
原生JavaScript实现随机点名表
2021/01/14 Javascript
python使用PIL模块实现给图片打水印的方法
2015/05/22 Python
PyQt5每天必学之工具提示功能
2018/04/19 Python
Python读取excel中的图片完美解决方法
2018/07/27 Python
Python使用百度翻译开发平台实现英文翻译为中文功能示例
2019/08/08 Python
Pytorch之view及view_as使用详解
2019/12/31 Python
HTML5 video播放器全屏(fullScreen)方法实例
2015/04/24 HTML / CSS
如何使用PHP session
2015/04/21 面试题
当文件系统受到破坏时,如何检查和修复系统?
2012/03/09 面试题
单位提档介绍信
2014/01/17 职场文书
新郎答谢词
2015/01/04 职场文书
2015年电话客服工作总结
2015/05/18 职场文书
第一节英语课开场白
2015/06/01 职场文书
2019年教师入党申请书
2019/06/27 职场文书
pytorch 梯度NAN异常值的解决方案
2021/06/05 Python
Redis 彻底禁用RDB持久化操作
2021/07/09 Redis
python代码实现扫码关注公众号登录的实战
2021/11/01 Python