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 相关文章推荐
filemanage功能中用到的common.js
Apr 08 Javascript
js防止表单重复提交的两种方法
Sep 30 Javascript
jQuery unbind()方法实例详解
Jan 19 Javascript
无需 Flash 使用 jQuery 复制文字到剪贴板
Apr 26 Javascript
深入理解Javascript中的观察者模式
Feb 20 Javascript
selenium 与 chrome 进行qq登录并发邮件操作实例详解
Apr 06 Javascript
利用canvas实现的加载动画效果实例代码
Jul 05 Javascript
vue购物车插件编写代码
Nov 27 Javascript
浅谈Vue页面级缓存解决方案feb-alive(上)
Apr 14 Javascript
微信小程序 scroll-view 水平滚动实现过程解析
Oct 12 Javascript
在Express中提供静态文件的实现方法
Oct 17 Javascript
layui前端时间戳转化实例
Nov 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
PHP 危险函数全解析
2009/09/09 PHP
PHP中获取变量的变量名的一段代码的bug分析
2011/07/07 PHP
详细讲解JS节点知识
2010/01/31 Javascript
js下通过getList函数实现分页效果的代码
2010/09/17 Javascript
中文路径导致unitpngfix.js不正常的解决方法
2013/06/26 Javascript
javaScript NameSpace 简单说明介绍
2013/07/18 Javascript
cookie.js 加载顺序问题怎么才有效
2013/07/31 Javascript
JsRender for object语法简介
2014/10/31 Javascript
javascript获取flash版本号的方法
2014/11/20 Javascript
jQuery遍历json的方法(推荐)
2016/06/12 Javascript
JS实现给对象动态添加属性的方法
2017/01/05 Javascript
基于Marquee.js插件实现的跑马灯效果示例
2017/01/25 Javascript
js实现文字选中分享功能
2017/01/25 Javascript
浅谈jQuery中的$.extend方法来扩展JSON对象
2017/02/12 Javascript
Vue学习笔记进阶篇之多元素及多组件过渡
2017/07/19 Javascript
easyui datagrid 表格中操作栏 按钮图标不显示的解决方法
2017/07/27 Javascript
vue生命周期和react生命周期对比【推荐】
2018/09/19 Javascript
Electron中实现大文件上传和断点续传功能
2018/10/28 Javascript
jquery 验证用户名是否重复代码实例
2019/05/14 jQuery
使用JS判断页面是首次被加载还是刷新
2019/05/26 Javascript
基于Proxy的小程序状态管理实现
2019/06/14 Javascript
原生js实现针对Dom节点的CRUD操作示例
2019/08/26 Javascript
小程序和web画三角形实现解析
2019/09/02 Javascript
微信小程序实现时间进度条功能
2020/11/17 Javascript
bootstrap实现嵌套模态框的实例代码
2020/01/10 Javascript
卸载vue2.0并升级vue_cli3.0的实例讲解
2020/02/16 Javascript
[36:09]Secret vs VG 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.24
2019/09/10 DOTA
Python利用BeautifulSoup解析Html的方法示例
2017/07/30 Python
python通过paramiko复制远程文件及文件目录到本地
2019/04/30 Python
Python 使用list和tuple+条件判断详解
2019/07/30 Python
Numpy数组array和矩阵matrix转换方法
2019/08/05 Python
css3+jq创作含苞待放的荷花
2014/02/20 HTML / CSS
小米旗下精品生活电商平台:小米有品
2018/12/18 全球购物
类、抽象类、接口的差异
2016/06/13 面试题
农村老人去世追悼词
2015/06/23 职场文书
2019年房屋委托租赁合同范本(通用版)!
2019/07/17 职场文书