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

所属分类: 软件教程 / 浏览下载 阅读数: 876
收藏 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 分享

迅雷下载加速器迅雷快鸟加速失败的解决方法

如果迅雷快鸟出现故障了怎么办?正式版发布,本想着之前无法加速的问题会得到改善,这不刚装上提示迅雷快鸟加速停止,下面是迅雷快鸟加速停止解决办法
收藏 0 赞 0 分享

网络硬盘115网盘怎么用下载需要哪些步骤

115网盘是大家都很喜欢使用的网络硬盘,和它属于同一类的还有百度云、360云盘和腾讯微云等,下面就为大家带来115网盘下载方法步骤
收藏 0 赞 0 分享

搜狗浏览器扩展程序的使用教程(卸载与停用)

搜狗为用户提供了额外的浏览器插件,方便大家使用,在扩展程序中,就能够找得到,那么你知道扩展程序该怎么使用吗?下面以图文的形式为大家介绍下扩展程序的使用教程
收藏 0 赞 0 分享

最新版迅雷加速器快鸟使用教程

加速器迅雷快鸟正式版发布了,你是否也在询问迅雷快鸟的使用教程,下面以图文的形式为大家介绍下迅雷快鸟怎么用,还不知道的朋友可以看看哦
收藏 0 赞 0 分享

搜狗高速浏览器兼容模式的切换使用以解决兼容问题

搜狗高速浏览器中,提供了多种上网那个模式,高速模式、兼容模式、IE模式等,你知道搜狗浏览器兼容模式如何使用吗?下文着重介绍下,不了解的朋友可以看看
收藏 0 赞 0 分享

全新Spartan浏览器上手: Cortana上网体验

在刚开始使用Spartan浏览器的时候Cortana显得非常奇怪,一旦你理解语音助手是如何工作的,那么你将会非常乐于去发掘Cortana的功能,并成为你网页浏览重要部分。一句话来说Cortana默认在后台工作,当你需要的时候能够带来上下文相关重要信息
收藏 0 赞 0 分享

迅雷高速通道变灰色怎么办?迅雷高速通道不能用解决方法

迅雷高速通道是下载利器,只有能使用高速通道下载东西都感觉特别快,但是有时候会出现迅雷高速通道下载按钮变灰色不能用的情况,下文小编就为大家带来迅雷高速通道不能用的解决方法,一起去看下吧
收藏 0 赞 0 分享

IE的替身 微软斯巴达浏览器阅读列表和阅读模式功能细节揭秘

下面小编将为大家带来IE的替身,微软斯巴达浏览器阅读列表和阅读模式功能细节,感兴趣的朋友可以过来了解一下哦
收藏 0 赞 0 分享

百度新闻怎么设置时间排序显示?

百度如何按时间排序查看新闻?现在用百度搜索最新的新闻事件已经成为了我们的生活习惯,而且百度本身的数据资源也已经是越来越完善,更新速度也是越来越快,百度如何按时间排序查看新闻呢?请看下文
收藏 0 赞 0 分享
查看更多