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

发布于 2019-11-26  85 次阅读


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


本当の声を響かせてよ