## JS图片错误处理
### 一、源码介绍
在网页开发中，图片加载失败是一个常见的问题，为了提高用户体验，可以通过JavaScript对图片加载失败的情况进行捕获和处理，以下是几种常见的方法：
#### 1. 使用onerror事件处理器
通过监听`img`标签的`onerror`事件，可以在图片加载失败时执行特定的函数。
“`html
“`
#### 2. 使用jQuery处理图片错误
如果项目中引入了jQuery，可以使用jQuery的`.error()`方法来处理图片加载失败的情况：
“`html
$(document).ready(function() {
$(“#myImage”).error(function() {
$(this).hide(); // 隐藏图片
// 或者替换为默认图片
// $(this).attr(“src”, “images/demo.png”);
});
});
“`
#### 3. 使用原生JavaScript处理图片错误
通过创建一个图像对象并设置其`src`属性，可以动态检查图片是否加载成功，以下是一个示例：
“`javascript
function image(src, cfg) {
var img, prop, target;
cfg = cfg || (isType(src, ‘o’) ? src : {});
img = $id(src);
if (img) {
src = cfg.src || img.src;
} else {
img = document.createElement(‘img’);
src = src || cfg.src;
}
if (!src) return null;
prop = isType(img.naturalWidth,’u’) ? ‘width’ : ‘naturalWidth’;
img.alt = cfg.alt || img.alt;
img.src = src;
target = $id(cfg.target);
if (target) {
target.insertBefore(img, $id(cfg.insertBefore) || null);
}
if (img.complete) {
if (img[prop]) {
if (isType(cfg.success,’f’)) {
cfg.success.call(img);
}
} else {
if (isType(cfg.failure,’f’)) {
cfg.failure.call(img);
}
}
} else {
if (isType(cfg.success,’f’)) {
img.onload = cfg.success;
}
if (isType(cfg.failure,’f’)) {
img.onerror = cfg.failure;
}
}
return img;
“`
#### 4. 全局监听图片错误
可以通过监听全局的`error`事件，然后判断触发错误的元素是否是`Img`标签来实现统一处理：
“`javascript
window.addEventListener(“error”, function(event) {
const target = event.target;
if (target instanceof HTMLImageElement) {
target.src = “https://p3.ssl.qhimg.com/t011d7a9a61e6d6be72.png”;
console.log(“图片加载异常”, target);
}
});
“`
#### 5. CSS处理方式
除了JavaScript，还可以通过CSS伪元素或背景图片的方式来处理图片加载失败的情况：
“`css
/* 伪元素 */
img {
display: inlineblock;
position: relative;
width: 200px;
height: 200px;
background: #ccc;
verticalalign: top;
img:after {
content: ”;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: url(‘img/b.jpg’) #ccc;
“`
“`css
/* 多背景特性 */
div {
width: 200px;
height: 200px;
background: url(a.jpg), url(logo.png) #f1f1f1;
“`
### 二、相关问题与解答
**Q1: 如何处理图片加载失败时显示默认图片？
A1: 可以在HTML的`img`标签上绑定`onerror`事件，并在事件处理器中更改图片的`src`属性为默认图片的路径。
“`html
“`
**Q2: 如何统一处理页面中所有图片的加载失败情况？
A2: 可以通过监听全局的`error`事件，然后判断触发错误的元素是否是`Img`标签来实现统一处理：
“`javascript
window.addEventListener(“error”, function(event) {
const target = event.target;
if (target instanceof HTMLImageElement) {
target.src = “https://p3.ssl.qhimg.com/t011d7a9a61e6d6be72.png”;
console.log(“图片加载异常”, target);
}
});
“`
原创文章，作者：未希，如若转载，请注明出处：https://www.kdun.com/ask/1086309.html
微信扫一扫