1. 云栖社区>
  2. 技术文集>
  3. 列表>
  4. 正文

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

作者:用户 来源:互联网 时间:2016-11-16 20:51:12

问题图片浏览器imgevent加载 失败最失败wwjod.dll加载失败null加载失败火狐获取event对象onerror加载失败

图片加载失败,所导致的浏览器兼容问题 - 摘要: 本文讲的是图片加载失败,所导致的浏览器兼容问题, 网站当中经常会遇到图片加载失败的问题,img中有地址,但是地址打开是错误的。情况如下: 不同浏览器处理错误图片是不一样的,有的干脆就显示差号,例如I

网站当中经常会遇到图片加载失败的问题,img中有地址,但是地址打开是错误的。情况如下: 图片加载失败,所导致的浏览器兼容问题-谷歌浏览器加载失败

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

图片加载失败,所导致的浏览器兼容问题-浏览器图片加载失败解决方案

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

<img src=http://www.aseoe.com/"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=http://www.aseoe.com/"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/"http://www.aseoe.com/statics/images/nopic.gif"; 
        img.onerror=null;   
    }  

</script>  



以上是云栖社区小编为您精心准备的的内容,在云栖社区的博客、问答、公众号、人物、课程等栏目也有 的相关内容,欢迎继续使用右上角搜索按钮进行搜索问题 , 图片 , 浏览器 , img , event , 加载 失败 , 最失败 , wwjod.dll加载失败 , null加载失败 , 火狐获取event对象 , onerror 加载失败 谷歌浏览器加载失败、浏览器图片加载失败、浏览器视频加载失败、浏览器加载失败、手机浏览器 加载失败,以便于您获取更多的相关知识。

jquery+ajax 使用.load()加载的页面一闪一闪的

... 这个貌似是兼容性问题,你的代码没错,只是不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况,如果想兼容各种浏览器,需要楼主下功夫测试兼容性了 解决方案五: Edge并没有问题... 解决...

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

...img中有地址,但是地址打开是错误的。情况如下: 不同浏览器处理错误图片是不一样的,有的干脆就显示差号,例如IE,有的显示一张破碎的图片,有的则是给一张高度比较大的默认图,例如PC端的火狐,IOS中Safari,还有安卓中...

KodExplorer 3.37 重大更新,数百项细节优化

...辑、上传下载、在线解压缩、音乐播放功能。让你直接在浏览器端实现web开发、源码文件预览、网站部署的同时拥有与本地操作一样方便、快捷、安全的体验。 完美取代落后的FTP工具:客户端软件等复杂的安装配置。kod一键...

网站前端和后台性能优化的34条宝贵经验和方法

...数又不会增加页面大小的方法。但目前并不是所有的主流浏览器都支持内联图片。   减少页面的Http请求数量是第一步,而且对于提高用户初次访问体验是最重要的一步。正如在 Tenni Theurer的blog中的Browser Cache Usage - Exposed!里描述...

微信iOS WKWebview 网页开发适配指南

...开发者可去掉页面相关逻辑。   二:页面通过LocalID预览图片  变化:不再支持通过使用chooseImage api返回的localld以如:”img src=wxLocalResource://50114659201332”的方式预览图片。  适配建议: 1. 在iOS微信6.5.3版本及之后的版本中,使...

前三篇
后三篇
弹性可伸缩的计算服务,助您降低 IT 成本,提升运维效率

40+云计算产品,6个月免费体验

稳定可靠、可弹性伸缩的在线数据库服务,全球最受欢迎的开源数据库之一

云服务器9.9元/月,大学必备