图片404加载失败后如何处理

开发过程中是不是经常遇到这种情况,图片加载失败了,显示一张裂了的小图,很影响页面,所以如何才能处理这种情况呢?

两种办法,分为原生和jQuery

A. 先说原生方法:

首先我们了解下,图片除了最主要的src路径外,存在几个常用的事件:

onerror:图像加载过程中发生错误时被触发。

onabort:图片加载的时候,用户通过点击停止加载时触发,通常在这里触发一个提示:“图片正在加载”。

onload:当图片加载完成之后触发。

你现在应该已经知道了,我们可以通过onerror事件来触发回调处理:

给图片加载失败绑定onImg()方法

扫描二维码关注公众号,回复: 2773357 查看本文章

两种处理办法,第一种给图片添加默认图片:

第二种,隐藏图片:

现在就可以通过这两种办法优雅的解决裂图了,但是需要注意:

这种办法必须方法在dom渲染之前定义,不然图片加载失败后无法找到noImg()方法:

我的项目是用的vue,而且项目部署在海外,所以如果没有FQ的话,加载时间会很久而且会404,所以像我这种情况也可以把处理函数直接写在dom里面:

 B. jQuery监听

 

注意:jQuery要在img之前引入,函数定义要在img之后

希望本文对你有所帮助!

猜你喜欢

转载自www.cnblogs.com/wangqiao170/p/9480001.html