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

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

yy浏览器查看收藏的网页方法图解

很多喜欢使用YY语音的朋友们同样也喜欢使用YY浏览器,那么,我们在使用YY浏览器浏览网页的过程中,收藏了自己喜欢的网页后,如何查看收藏的网页呢?针对此问题,本文就为大家介绍yy浏览器查看收藏的网页的方法
收藏 0 赞 0 分享

Spartan浏览器的改变 配黑暗模式、独立跨平台

微软全新一代了浏览器项目“Spartan(斯巴达)”,并认为该浏览器相对 Internet Explorer 是一个改头换面的开始。事实上,该浏览器的确融入了很多意想不到新体验,我们一同来看看
收藏 0 赞 0 分享

百度云管家硬盘就会不停的响 现狂读、狂写的解决办法

百度云管家硬盘就会不停的响,并且出现狂读、狂写、狂转、狂卡硬盘该怎么办?下面分享解决这一问题的方法,需要的朋友可以参考下
收藏 0 赞 0 分享

微软全新浏览器Spartan怎么样? 斯巴达跑分完胜IE11

微软全新浏览器Spartan怎么样?全新 Windows 10 在众多方面都堪称是一次转变巨大的系统更迭,这其中就包含“斯巴达”新型浏览器。下面我们来看看斯巴达浏览器的跑分吧
收藏 0 赞 0 分享

百度网盘怎么设密码? 百度网盘给下载连接设置密码的方法

百度网盘如何给下载连接设置密码?百度网盘 如何实现加密分享,因为是百度网盘的老用户了所以推荐大家,下面分享百度网盘给下载连接设置密码的方法,需要的朋友可以参考下
收藏 0 赞 0 分享

迅雷极速怎么设置透明壁纸?

迅雷极速怎么设置透明壁纸?迅雷是我们最常用的下载工具之一,迅雷极速版也是迅雷旗下最新推出的下载工具,他以3无(无广告、无捆绑、无插件)著称,是一件很好用的下载软件。今天就为大家介绍其换壁纸的小功能
收藏 0 赞 0 分享

UC浏览器怎么换皮肤(多套皮肤可供选择)

不但要在功能上下功夫,而且还要满足用户的视觉感受。说起uc浏览器的换皮肤的功能,用过的朋友都知道,有多套皮肤可以自由选择,下面以图文的形式为大家介绍下怎么换皮肤
收藏 0 赞 0 分享

搜狗浏览器如何设置双击关闭网页(适合习惯速度的朋友)

为了方便快速操作,会对搜狗浏览器进行简单基本的设置,如果你想快速关闭网页,那么我们在搜狗上设置一个双击关闭网页,下面是详细的设置步骤
收藏 0 赞 0 分享

搜狗浏览器收藏夹路径在哪有哪些查找技巧

注册了账号就可以将自己常用的网站收藏起来,随时随地使用,很方便,你知道搜狗浏览器的收藏夹路径在哪吗?下面以图文的形式为大家详细介绍下,感兴趣的朋友可以看看哦
收藏 0 赞 0 分享
查看更多