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 flash下fromCharCode和charCodeAt方法使用说明
Jan 12 Javascript
javascript 写类方式之二
Jul 05 Javascript
基于jquery的修改当前TAB显示标题的代码
Dec 11 Javascript
jQuery中(function(){})()执行顺序的理解
Mar 05 Javascript
Node.js模块加载详解
Aug 16 Javascript
js实现简单的省市县三级联动效果实例
Feb 18 Javascript
基于javascript html5实现多文件上传
Mar 03 Javascript
快速掌握Node.js事件驱动模型
Mar 21 Javascript
JavaScript求一个数组中重复出现次数最多的元素及其下标位置示例
Jul 23 Javascript
JavaScript常见鼠标事件与用法分析
Jan 03 Javascript
微信小程序使用map组件实现路线规划功能示例
Jan 22 Javascript
Vue自定义render统一项目组弹框功能
Jun 07 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
Netflix将与CLAMP、乙一以及冲方丁等6名知名制作人合伙展开原创动画计划!
2020/03/06 日漫
法国:浪漫之都的咖啡文化
2021/03/03 咖啡文化
浅析php中jsonp的跨域实例
2013/06/21 PHP
php分页查询的简单实现代码
2017/03/14 PHP
Thinkphp开发--集成极光推送
2017/09/15 PHP
php实现的三个常用加密解密功能函数示例
2017/11/06 PHP
laravel实现一个上传图片的接口,并建立软链接,访问图片的方法
2019/10/12 PHP
JQuery的Validation插件中Remote验证的中文问题
2010/07/26 Javascript
JavaScript实现防止网页被嵌入Frame框架的代码分享
2014/12/29 Javascript
JavaScript数据结构和算法之图和图算法
2015/02/11 Javascript
javascript中attachEvent用法实例分析
2015/05/14 Javascript
jQuery实现瀑布流布局详解(PC和移动端)
2020/09/01 Javascript
JS简单实现浮动窗口效果示例
2016/09/07 Javascript
vue实现ToDoList简单实例
2017/02/07 Javascript
Nodejs 复制文件/文件夹的方法
2017/08/24 NodeJs
vue打包后显示空白正确处理方法
2017/11/01 Javascript
vue.js实现点击后动态添加class及删除同级class的实现代码
2018/04/04 Javascript
[00:15]TI9地铁玩家打卡
2019/08/11 DOTA
Python中threading模块join函数用法实例分析
2015/06/04 Python
Python自定义进程池实例分析【生产者、消费者模型问题】
2016/09/19 Python
pyqt5 获取显示器的分辨率的方法
2019/06/18 Python
python 杀死自身进程的实现方法
2019/07/01 Python
这可能是最好玩的python GUI入门实例(推荐)
2019/07/19 Python
Python2与Python3的区别点整理
2019/12/12 Python
PyQt5的相对布局管理的实现
2020/08/07 Python
HTML5如何为形状图上颜色怎么绘制具有颜色和透明度的矩形
2014/06/23 HTML / CSS
美国家居装饰店:Z Gallerie
2020/12/28 全球购物
党章学习思想汇报
2014/01/14 职场文书
老公给老婆的保证书
2014/04/28 职场文书
学校安全生产月活动总结
2014/07/05 职场文书
感恩老师演讲稿400字
2014/08/28 职场文书
2014第二批党员干部对照“四风”找差距检查材料思想汇报
2014/09/18 职场文书
学生上课看漫画的检讨书
2014/09/26 职场文书
2014年政教处工作总结
2014/12/20 职场文书
退休欢送会主持词
2015/07/01 职场文书
vue-treeselect的基本用法以及解决点击无法出现拉下菜单
2022/04/30 Vue.js