IE浏览器中图纸onload事件无效的解决办法,图片总

时间:2019-07-30 00:15来源:2020欧洲杯冠军竞猜官方网站
遗闻方式实现是只加载当前浏览的照片和它下边包车型客车两张相片,加载照片的时候才会加载和渲染切磋区,图片并未有加载前会用二个一象素的图纸占位,并用贰个loading类将展现出

遗闻方式实现是只加载当前浏览的照片和它下边包车型客车两张相片,加载照片的时候才会加载和渲染切磋区,图片并未有加载前会用二个一象素的图纸占位,并用贰个loading类将展现出一个loading背景图,决断在可视区的时候替换来真正的图样,图片加载成功后去除loading类。

作为WEB设计者,为了在网页彰显上巩固用户体验,日常会采取图象载入显示状态方法,这自然供给Image对象的onload事件。 在firefox浏览器下做到支付后,然而在IE浏览器中实行调养总无法被调用。不管是时髦版的IE8依旧旧版本的IE7和IE6都对事情未有什么益处,最初的代码简化后如下:

主题素材出在最前面,测量检验的时候发掘在IE下loading类无法删除,当时代码如下:

var img = new Image();
img.src = "test.gif";
img.onload = function(){
    alert(this.src);
    //other      
};

复制代码 代码如下:

简单易行看过之后貌似这段代码未有啥样难点,然则IE下就不是能符合规律的运作。不管怎么检查实验,IE根本不会理会,不过依旧找到了减轻的措施,原理如下:
图片下载时,浏览器会把图片缓存起来,再度加载此图片时就能从缓冲区里加载。
那么一旦图片已经在缓存区了,是还是不是从缓冲区里加载的图样就不触发onload事件呢?
测试……

img.src = _src;
img.src = _src;
img.onload = function(){
   _con.delClass('loading');
}

var img = new Image();
img.onload = function(){
    alert(this.src);
    //other    
};
img.src = "test.gif";

网络找了一番,onload和定义src的口舌应该换一下种种,IE从缓存中取图片,onload根本不接触,opera也可能有那么些病痛,正确代码修改如下

测量试验成功!

复制代码 代码如下:

结论:应该把onload写到src前边,先告诉浏览器图片加载完要怎么管理,再让它去加载图片。 所以,不是IE浏览器不会触发onload事件,而是因为加载缓冲区的速度太快,在未曾告诉它加载完要如何做时,它曾经加载完了。反过来讲,firefox明显更智能一些,加入onload事件后,firefox浏览器会检查测试缓冲区是不是曾经有此图片,有的话一贯就触发那件事件!

img.onload = function(){
   _con.delClass('loading');
};
img.src = _src;

随即就通常了

敲定:应该把onload写到src前边,先告诉浏览器图片加载完要怎么管理,再让它去加载图片。 所以,不是IE浏览器不会触发onload事件,而是因为加载缓冲区的速度太快,在平昔不告诉它加载完要怎么做时,它曾经加载完了。反过来说,firefox分明更智能一些,加入onload事件后,firefox浏览器会检查实验缓冲区是或不是已经有此图片,有的话一向就触发那一件事件!

你大概感兴趣的稿子:

  • js onload事件不起功用示例剖判
  • js的onload事件及初步化开关事件示例代码
  • js之onload事件的少数使用体验

编辑:2020欧洲杯冠军竞猜官方网站 本文来源:IE浏览器中图纸onload事件无效的解决办法,图片总

关键词: 欧洲杯竞猜