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的学习步骤
Feb 23 Javascript
Node.js node-schedule定时任务隔多少分钟执行一次的方法
Feb 10 Javascript
JavaScript跨浏览器获取页面中相同class节点的方法
Mar 03 Javascript
javascript中SetInterval与setTimeout的定时器用法
Aug 24 Javascript
js中利用tagname和id获取元素的方法
Jan 03 Javascript
AngularJS优雅的自定义指令
Jul 01 Javascript
谈谈第三方App接入微信登录 解读
Dec 27 Javascript
javascript 删除数组元素和清空数组的简单方法
Feb 24 Javascript
iview日期控件,双向绑定日期格式的方法
Mar 15 Javascript
JS实现数组的增删改查操作示例
Aug 29 Javascript
微信小程序 wepy框架与iview-weapp的用法详解
Apr 10 Javascript
js实现旋转的星空效果
Nov 01 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中的CMS的涵义
2007/03/11 PHP
PHP+ACCESS 文章管理程序代码
2010/06/21 PHP
laravel 中某一字段自增、自减的例子
2019/10/11 PHP
YII2框架中添加自定义模块的方法实例分析
2020/03/18 PHP
获得所有表单值的JQuery实现代码[IE暂不支持]
2012/05/24 Javascript
如何用JavaScript动态呼叫函数(两种方式)
2013/05/03 Javascript
jquery ajax jsonp跨域调用实例代码
2013/12/11 Javascript
JavaScript中输出标签的方法
2014/08/27 Javascript
js贪吃蛇游戏实现思路和源码
2016/04/14 Javascript
jQuery ajax请求struts action实现异步刷新
2017/04/19 jQuery
vue中v-for加载本地静态图片方法
2018/03/03 Javascript
[54:19]完美世界DOTA2联赛PWL S2 Magma vs PXG 第二场 11.28
2020/12/01 DOTA
ubuntu安装sublime3并配置python3环境的方法
2018/03/15 Python
Python实现爬取百度贴吧帖子所有楼层图片的爬虫示例
2018/04/26 Python
Windows系统下PhantomJS的安装和基本用法
2018/10/21 Python
对python创建及引用动态变量名的示例讲解
2018/11/10 Python
Tensorflow实现酸奶销量预测分析
2019/07/19 Python
django-初始配置(纯手写)详解
2019/07/30 Python
Pycharm 安装 idea VIM插件的图文教程详解
2020/02/21 Python
用python按照图像灰度值统计并筛选图片的操作(PIL,shutil,os)
2020/06/04 Python
python用tkinter实现一个gui的翻译工具
2020/10/26 Python
详解pycharm连接远程linux服务器的虚拟环境的方法
2020/11/13 Python
HTML5制作酷炫音频播放器插件图文教程
2014/12/30 HTML / CSS
HTML5中的音频和视频媒体播放元素小结
2016/01/29 HTML / CSS
Fossil加拿大官网:化石手表、手袋、首饰及配饰
2019/04/23 全球购物
新闻学专业大学生职业生涯规划范文
2014/03/02 职场文书
卖车协议书
2014/04/21 职场文书
审计专业自荐信范文
2014/04/21 职场文书
企业人事任命书
2014/06/05 职场文书
绘画专业自荐信
2014/07/04 职场文书
低碳日宣传活动总结
2014/07/09 职场文书
生产工厂门卫岗位职责
2014/09/26 职场文书
先进班组事迹材料
2014/12/25 职场文书
离婚协议书的范本
2015/01/27 职场文书
学校少先队工作总结
2015/08/12 职场文书
Angular CLI发布路径的配置项浅析
2021/03/29 Javascript