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

首页 » 技术教程 » 正文

有时候我们的网页或者网站在引用图片的时候,或多或少会出现图片无法加载的情况,一般来说都是图片源文件丢失或者不允许调用了
要是我们不去管这个图片的话,就会出现对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) 打赏 生成海报

评论 抢沙发

6 + 4 =


长按图片转发给朋友

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

支付宝扫一扫打赏

微信扫一扫打赏

向英雄致敬!为同胞默哀
为所有停留在寒冬的人默哀和悼念。锅巴网,将全天以黑白形式呈现网页。请悉知
切换注册

登录

忘记密码 ?

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

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

注册