热门标签

, , ,

Vieu四代商业主题

高扩展、安全、稳定、响应式布局多功能模板。

¥69 现在购买

特别声明:文章多为网络转载,资源使用一般不提供任何帮助,特殊资源除外,如有侵权请联系!

有时候我们的网页或者网站在引用图片的时候,或多或少会出现图片无法加载的情况,一般来说都是图片源文件丢失或者不允许调用了
要是我们不去管这个图片的话,就会出现对SEO不友好请的情况,如果一个一个去检查那么有太麻烦了。
这个时候要怎么办呢,有没有一种方法可以做到当我们的图片无法加载时,就可以自动的帮我们处理这个图片呢?当然有!

onerror 事件

在 HTML DOM 属性对象 中,给我们提供了一个 onerror 事件,这个事件 可以在当媒体数据加载期间发生错误时执行 JavaScript,那么 这个事件要怎么使用呢。

使用语法
<img src="images/logo.png" myFunction()';">

这个事件 不光是可以用在图片上,也可以用在视频/音频(audio/video)上面
为了简单点你也可以直接使用下面这种方式

<img src="images/logo.png" onerror="javascript:this.src='images/error.png';">

这种方式呢可能会出现一种bug是什么呢,就是假如你的 error.png 这张图片也无法加载,就会无限重复死循环。可能导致页面的卡死。

你呢就可以使用js来控制这个事件

<img src="images/logo.png" onerror="myFunction();"/>
<script type="text/javascript">
function myFunction() {
var img = event.srcElement;
img.src = "images/error.png";
img.onerror = null; //解绑onerror事件
}
</script> 
onerror 支持的浏览器
网站图片加载失败时的处理方法

onerror 事件

未经允许不得转载:作者:锅巴网络, 转载或复制请以 超链接形式 并注明出处 锅巴资源
原文地址:《网站图片加载失败时的处理方法》 发布于2019-11-26

分享到:
赞(1) 打赏

评论 抢沙发

8 + 4 =


网站图片加载失败时的处理方法

长按图片转发给朋友

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

Vieu4.5主题
专业打造轻量级个人企业风格博客主题!专注于前端开发,全站响应式布局自适应模板。
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册