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

所属分类: 软件教程 / 浏览下载 阅读数: 818
收藏 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>    
更多精彩内容其他人还在看

VPS中FTP传送模式的设置图文示例

由于超长距离网络传输所处的特殊性,大部分情况下FTP在“主动模式”下才能正常工作。
收藏 0 赞 0 分享

使用WinSCP连接到Linux实现管理的图文教程

WinSCP的不足之处在于,WinSCP使用SFTP协议进行连接,而通过该连接的通信内容全部是经过加密的,在保证了安全的同时,也降低了传输速度。
收藏 0 赞 0 分享

IE8不能显示png图片的解决方法

今天突然发现很多网站的图片显示都是小叉叉,后来发现竟然是我的IE8不能正常显示png图片所导致的问题。如何解决这个问题呢?
收藏 0 赞 0 分享

故障解决 系统崩溃或是浏览器IE意外关闭

有没有遇到过这样的情况,为了查找资料打开了很多网页,突然系统崩溃或是浏览器意外关闭,线索一下子全断了…真是很沮丧啊!  
收藏 0 赞 0 分享

Outlook 无法打开附件的解决方法

有时候我们会碰到Outlook打不开附件的问题,软件会提示 “无法创建文件”,重新安装了Office也不行。我们可以用下面的方法解决问题。
收藏 0 赞 0 分享

关闭IE8关闭加速器和IE加速器图标

在IE8浏览器以上版本,增加了一个加速器功能,在任意网页上选择文字,就会出现一个蓝色箭头的小图标,这个就是IE加速器。
收藏 0 赞 0 分享

IE8浏览器突破同时下载2个文件的限制的图文设置方法

IE8在同一网站下只能同时下载2个文件,当网站上好的内容太多的时候,如果不用其他的下载程序帮忙,感觉两个两个的下载速度太慢了。这时你可以对注册表进行修改,突破IE8下载文件的连接数限制。
收藏 0 赞 0 分享

IE8下载不提示保存对话框问题的解决方法

用户使用IE8下载RAR文件的时候,不小心将那个“在打开这种类型的文件前始终询问”前面的复选框去掉了。
收藏 0 赞 0 分享

屏蔽优酷、土豆等多个视频网站的15秒广告的方法(通过hosts)

最近有朋友看视频的时候,总是有一些广告,偶尔还可以,总是出现让大家挺烦的,所以网上找了下面的方法,原理很简单就是改hosts的!在改之前最好先备份一下hosts。
收藏 0 赞 0 分享

IE9整合下载管理员使下载更方便

以往IE浏览器最让人郁闷的就是每下载一个文件就会开启一个新的窗口,现在IE9终于整合了“下载管理员”,可以让你轻松找到并管理下载的文件了。
收藏 0 赞 0 分享
查看更多