js注意img图片的onerror事件的分析

JS注意img图片的onerror事件的分析

常见问题

在网页中嵌入图片时，有时因为链接错误或图片本身损坏等问题，图片可能无法正常加载。为了避免这种情况对用户造成不良影响，可以使用onerror事件对未能加载的图片进行处理。

onerror事件语法

<img src="xxx.jpg" onerror="imgError()" />

function imgError() {
  alert("图片加载失败！");
}

当图片加载失败时，会触发onerror事件，执行imgError函数，这里我们只是简单的使用alert出来提示信息，你也可以根据业务需求处理其他相关的操作。

使用onerror事件的应用场景

1. 处理图片失败

有时候网站中的某个图片链接失效，但却占用了不必要的流量和服务器资源，使用onerror事件可以减少这种资源的消耗，避免对服务器造成额外负担。

<img src="http://example.com/wrong-url.jpg" onerror="this.style.display = 'none'">

这里通过设置img的display属性为none来使其在加载失败后不再占用空间和流量。当然你也可以将该图片显示为其他内容，如使用默认图片代替，或使用有意义的提示语句提醒用户。

1. 加载默认图片

在实际的开发中，由于网络不稳定，有时候正常能加载的图片，由于某些特殊原因无法加载。这时候可以使用onerror事件，将其替换为我们准备好的默认图片。

<img src="http://example.com/image.jpg" onerror="this.src = 'http://example.com/default.jpg'">

这里将图片的src属性设置为默认图片的链接，当加载出错时就会使用默认图片代替，用户看来是一张正常的图片，避免了视觉上的不美观。

小结

onerror事件是对于图片在加载中出现错误时能够及时的对问题进行控制的一种方式，可以使用该事件来对于图片的错误渲染进行处理，使用户更好的体验到站内的功能。