前端检测图片加载失败，替换图片

最近做的一个系统出现了问题，<img/>标签添加src属性，但是你怎么知道这个路径是否无效呢？
废话不多说，

//检查图片是否存在
function CheckImgExists(imgurl) {var ImgObj = new Image(); //判断图片是否存在ImgObj.src = imgurl;//没有图片，则返回-1if (ImgObj.fileSize > 0 || (ImgObj.width > 0 && ImgObj.height > 0)) {alert（'存在'）} else {alert('不存在')}
},

这样试了之后发现不行，因为进不到if里面，每次都是进入到else里面。找原因找了一会儿，出现了一个大胆的猜测，是因为赋值src成功但是还没有加载到，所以获取不到大小及宽高。

然后升级版本出现了

//检查图片是否存在
CheckImgExists(imgurl) {var ImgObj = new Image(); //判断图片是否存在ImgObj.src = imgurl;//加了一个onload事件，赋值成功后进行加载之后获取宽高，ImgObj.onload = function(){//没有图片，则返回-1if (ImgObj.fileSize > 0 || (ImgObj.width > 0 && ImgObj.height > 0)) {alert（'存在'）        } else {alert('不存在')}}},

注：升级版本是在原作者之上进行修改。

解决了问题，在此感谢作者，原文链接：http://www.52jb.net/biancheng/3097.html

前端检测图片加载失败，替换图片相关推荐

图片加载失败替换图片解决方案
图片加载失败在不同浏览器表现有差异,比如google可能会一片空白.img的宽高是0*0,ie会在图片位置会出现一个碎片图标,火狐会显示一个边框像这样: 一个页面如果很多这种好难看,一般会用默认图片替 ...
img标签图片加载失败显示图片
img标签图片加载失败显示图片 onerror="οnerrοr=null;src='../../image/community/initialize_img.png'"
vue本地项目配置图片加载失败_vue图片加载失败时用默认图片替换的方法
vue图片加载失败时用默认图片替换的方法前言本文主要给大家介绍的关于vue实现图片加载失败时用默认图片替换的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧方法如下原理 ...
小程序动态图片加载失败替换本地图片
希望效果图: 前言:写一个新闻列表,一个页面里就有几十条数据,虽然分页查询,但图片有时候还会加载失败(网速.图片大小等原因) 下面说说我的思路: 我把新闻列表封装成了一个子组件, 1.在子组件标签im ...
htmlimg图片加载失败_img图片不存在显示默认图
在项目中,我们使用img标签加载图片,有时候图片地址有可能失效,获取路径问题,导致图片加载失败,img标签就会显示alt内容.这时候用户体验不是很好,所以就需要显示一张默认图片. 第一种方式:使用jq ...
element ui 图片加载失败_element图片懒加载的问题
本来我这个人就很懒的,并不喜欢写说明博客之类,浪费时间浪费精力,学习的过程,遇到一些很小白的问题,百度搜索解决,然后在代码里注释下而已, 突然想到世界上是存在大多数像我这样的小白的,滴水之恩当涌泉相报 ...
img图片加载失败默认图片
<img :src="item.goods_pic" οnerrοr="javascript:this.src='../static/images/default. ...
图片加载失败的正确处理
<img src="http://imgsrc.baidu.com/forum/pic/item/fd1f4134970a304e16d3176ad3c8a786c8175ca8.jp ...
img实现图片加载前默认图片，加载时替换真实图片，加载失败时替换加载失败图片
文章目录前言一.加载前二.加载成功三.加载失败总结前言开发过程中,我们希望图片在加载失败的时候会替换成加载失败的图片,同时为了更好的体验,加载前最好也要有一张占位图片,即实现加载前显示一 ...
img图片加载失败选择默认替换图片
一般我们需要加载图片的有两种: 1.img 标签直接通过src引用图片地址 img标签的话,可以通过img自带属性onerror 写一个js进行控制,当图片加载失败后触发onerror <img ...

前端检测图片加载失败，替换图片

前端检测图片加载失败，替换图片相关推荐

最新文章

热门文章