图片加载失败导致浏览器兼容问题的解决方法

所属分类: 软件教程 / 浏览下载 阅读数: 834
收藏 0 赞 0 分享

问题描述

网站当中经常会遇到图片加载失败的问题,img中有地址,但是地址打开是错误的。情况如下:

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

解决方案

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

<img src="img/noimage2.png" onerror="javascript:this.src='img/noimage2.png';" alt="pic" />

衍生问题

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

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

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

思路是:

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

代码如下:

JavaScript Code复制内容到剪贴板
  1. <img src="haorooms.gif" onerror="nofind();" />   
  2.   
  3. <script type="text/javascript">     
  4.   
  5.     function nofind(){     
  6.         var img=event.srcElement || event.target ;  //获取img对象,火狐是event.target ,IE及谷歌其他是event.srcElement    
  7.         console.dir(img);//大家可以打印看一下   
  8.         img.src="mapmoren.png";    
  9.         img.onerror=null;      
  10.     }     
  11.   
  12. </script>    
更多精彩内容其他人还在看

迅雷如何下载网页视频?迅雷下载网页视频的两种方法

很多朋友不清楚迅雷如何下载网页视频?下面小编给大家带来迅雷下载网页视频方法,一起来看吧
收藏 0 赞 0 分享

千影浏览器怎么开启Cookie?

千影浏览器怎么开启Cookie?千影浏览器打开网页的时候,会出现页面拦截并提示需要卡其cookie,该怎么开启cookie呢?下面我们就来看看详细的教程,需要的朋友可以参考下
收藏 0 赞 0 分享

迅雷下载时提示“任务出错”怎么办?(附多种解决方法)

很多朋友在使用迅雷下载文件时提示“任务出错”这种情况,怎么解决呢?下面小编给大家带来迅雷下载时提示“任务出错”的多种解决方法,一起来看吧
收藏 0 赞 0 分享

迅雷9.1.27正式版更新了什么内容?

迅雷9.1.27正式版正式上线,详细版本号升级为9.1.27.648,而对于这个版本来讲,很多小伙伴是期待它的到来。那么迅雷9.1.27正式版更新了什么内容?下面就为大家详细介绍一下,来看看吧
收藏 0 赞 0 分享

千影浏览器怎么删除扩展应用?

千影浏览器怎么删除扩展应用?千影浏览器右上角有一个扩展应用的快捷方式,想要删除,该怎么设置呢?下面我们就来看看详细的教程,需要的朋友可以参考下
收藏 0 赞 0 分享

千影浏览器怎么设置关闭窗口时多个标签提示?

千影浏览器怎么设置关闭窗口时多个标签提示?千影浏览器打开了很多页面,但是不小心全关了,想要设置在关闭多个页面的时候有提示,该怎么设置呢?下面我们就来看看详细的教程,需要的朋友可以参考下
收藏 0 赞 0 分享

QQ浏览器9.5.4正式版更新发布:性能更加稳定

QQ浏览器是腾讯公司推出的新一代浏览器,采用全新架构并针对IE内核做了全面优化,一周前,QQ浏览器9.5.4正式版更新发布,更新日志与测试版一致,但性能更加稳定,我们来看看吧
收藏 0 赞 0 分享

傲游浏览器5.0.2.2正式发布:修复个别小语种翻译(附下载)

傲游浏览器用了傲游自主研发的全球首款双核引擎,具备高效的浏览速度及稳定性,使浏览网页更加流畅,日前,傲游浏览器5.0.2.2正式发布,修复个别小语种翻译问题,一起来看看吧
收藏 0 赞 0 分享

Mac平台全新傲游MX5浏览器测试版发布 附下载安装步骤

傲游在时隔四年之久后终于推出了新产品——傲游5 MX5,它主打的是未来浏览器的概念,昨日,Mac平台全新傲游MX5浏览器测试版发布,版本号为5.0.14.58,下面小编就为大家介绍全新功能以及下载安装步骤,来看看吧
收藏 0 赞 0 分享

FileZilla/FlashFXP使用二进制上传文件的设置方法

FileZilla是一个快速免费跨平台的FTP软件,实用多功能和界面直观的FTP客户端。下面小编给大家分享下FileZilla/FlashFXP使用二进制上传文件的设置方法,需要的朋友参考下
收藏 0 赞 0 分享
查看更多