如何使用 jQuery 或纯 JavaScript 替换损坏的图像？

使用 jQuery 替换损坏的图像

在网页上显示损坏的图像可能会让用户感到沮丧。幸运的是，JavaScript 提供了多种方法来处理这个问题。

一种方法是利用 jQuery 的过滤功能来识别和替换损坏的图像。为此：

1. 使用 jQuery 的 $("img") 选择器获取页面上的所有图像。
2. 使用 .error() 函数过滤图像集以识别损坏的图像images.
3. 对于每个损坏的图像，将 src 属性替换为所需的替换图像，例如默认的“无图像”

但是，为了简单起见，使用纯 JavaScript 来处理损坏的图像通常更容易。

JavaScript 解决方案：

onError 事件可用于在图像失败时重新分配源属性load:

function imgError(image) {
    image.onerror = "";
    image.src = "/images/noimage.gif";
    return true;
}

在 HTML 中实现此函数：

<img  src="/static/imghwm/default1.png" data-src="image.png" class="lazy" onerror="imgError(this);" alt="如何使用 jQuery 或纯 JavaScript 替换损坏的图像？" >

或者，可以在不使用函数的 HTML 中直接处理 onError 事件：

<img  src="/static/imghwm/default1.png" data-src="image.png" class="lazy" onerror="this.onerror=null;this.;" alt="如何使用 jQuery 或纯 JavaScript 替换损坏的图像？" >

出现错误的浏览器兼容性请参考下表设施：

http://www.quirksmode.org/dom/events/error.html

以上是如何使用 jQuery 或纯 JavaScript 替换损坏的图像？的详细内容。更多信息请关注PHP中文网其他相关文章！