当图片获取失败时onerror和onload

最新推荐文章于 2025-07-23 10:52:02 发布

转载最新推荐文章于 2025-07-23 10:52:02 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/zhangyafei/blog/1650009

文章标签：

#javascript #python #ViewUI

本文介绍了在网页开发中处理图片加载失败的方法，通过使用onerror和onload事件来实现图片加载失败后的隐藏或替换，默认图片的无限循环问题及其解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

最近项目中遇到一个问题，当图片加载不出来时。在pc，mobile上面，图片的位置是空白的。但是苹果pad上面，图片的位置是一个淡淡的方框，如图

于是就想到给这个无法显示的图片加一个visibility: hidden;这样就看不见，并且位置还保留着。同理，也可以替换为一张默认图片。

与加载有关的事件有2个，onerror和onload

1.使用onerror解决img加载失败的问题

先看一看官网对该事件的介绍

onerror 事件会在文档或图像加载过程中发生错误时被触发。

支持该事件的 HTML 标签：

<img>, <object>, <style>

支持该事件的 JavaScript 对象：

window, image

demo1.图片获取失败时制空

//当图片加载失败时，隐藏图片
<img onerror="checkError()"/>
<script>
function checkError(e){
    e.target.style.visibility = 'hidden';
}
</script>

实验得知，1.当图片地址为空时，会触发该事件。2.当图片有地址，但是没图片，在获取失败404时也会触发该事件

demo2.图片获取失败时，用默认图片替换

//当图片加载失败时，替换图片为default.png
<img onerror="checkError()"/>
<script>
function checkError(e){
    e.target.src = 'default.png';
}
</script>

但是如果默认图片也获取失败时，将会进入无限替换的循环中。

//当图片加载失败时，替换图片为default.png
<img onerror="checkError()"/>
<script>
function checkError(e){
    if(e.target.src == 'default.png'){
      return false
    }
    e.target.src = 'default.png';
}
</script>

2.使用onload解决img加载失败的问题

先看一看官网对该事件的介绍

onload 事件会在页面或图像加载完成后立即发生。

onload 常用在 <body> 中，一旦完全加载所有内容（包括图像、脚本文件、CSS 文件等），就执行一段脚本

支持该事件的 HTML 标签：

<body>, <frame>, <frameset>, <iframe>, <img>, <link>, <script>

支持该事件的 JavaScript 对象：

image, layer, window

转载于:https://my.oschina.net/zhangyafei/blog/1650009