图片加载失败,所导致的浏览器兼容问题

导语 网站当中经常会遇到图片加载失败的问题,img中有地址,但是地址打开是错误的。情况如下:不同浏览器处理错误图片是不一样的,有的干脆就显示差号,例如IE,有的显示一张破碎的图片,有的则是给一张高度比较大的默
网站当中经常会遇到图片加载失败的问题,img中有地址,但是地址打开是错误的。情况如下:
enter image description here

不同浏览器处理错误图片是不一样的,有的干脆就显示差号,例如IE,有的显示一张破碎的图片,有的则是给一张高度比较大的默认图,例如PC端的火狐,IOS中Safari,还有安卓中的UC浏览器。这样在手机中就会导致左右两侧图片高度不一致!如下图:

enter image description here

解决方案

其实这里解决很简单,判断当图片加载失败的时候给一个默认图就可以了,不让浏览器使用其自带的默认图。

<img src="http://www.aseoe.com/images/logo.png" onerror="javascript:this.src='http://www.aseoe.com/images/logo.png';" alt="pic" />

衍生问题

因为图片加载失败进入默认图,那么默认图再加载失败怎么办呢?这不是进入一个死循环吗?

最简单的一个解决办法是,onerror中的图保证能打开,保证比较小!不会出现问题!。这个方法也是最有效的方法!

假如你不能保证,那么,只能靠函数来解决这个问题了!

思路是:

当图片加载失败,进入onerror的时候,判断onerror的图片是不是能加载,在onerror中的图片触发onerror的时候,设置onerror为null。

代码如下:

<img src="logo.png" onerror="nofind();" />

<script type="text/javascript">  

    function nofind(){  
        var img=event.srcElement || event.target ;  //获取img对象,火狐是event.target ,IE及谷歌其他是event.srcElement 
        console.dir(img);//大家可以打印看一下
        img.src="http://www.aseoe.com/statics/images/nopic.gif"; 
        img.onerror=null;   
    }  

</script>  

http://www.aseoe.com/ true 图片加载失败,所导致的浏览器兼容问题 http://www.aseoe.com/show-12-692-1.html report 1034.5 网站当中经常会遇到图片加载失败的问题,img中有地址,但是地址打开是错误的。情况如下:不同浏览器处理错误图片是不一样的,有的干脆就显示差号,例如IE,有的显示一张破碎的图片,有的则是给一张高度比较大的默
TAG:浏览器 图片加载
本站欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果
转载请注明: 文章转载自:爱思资源网 http://www.aseoe.com/show-12-692-1.html

[前端插件推荐] Plugin

1 2 3 4
  • jQuery实现逐字逐句显示插件l-by-l.min.js
  • jQuery带方向感知的鼠标滑过图片边框特效插件
  • jQuery HotKeys监听键盘按下事件keydown插件
  • 响应式无限轮播jQuery旋转木马插件
响应式无限轮播jQuery旋转木马插件
web前端开发
爱思资源网 Copyright 2012-2014 Www.Aseoe.Com All rights reserved.(晋ICP备13001436号-1)