js 设置img标签的src资源没法找到的替代图片(经过img的属性设置)

在网站的前端页面设计中，要考虑到img图片资源的存在性，若是img的src图片资源不存在或显示不出来，则须要显示默认的图片。如何作到呢？

1、监听document的error事件

document.addEventListener("error", function (e) {
    var elem = e.target;
    if (elem.tagName.toLowerCase() === 'img') {
        var notFoundImgSrt = $(elem).attr("notFoundSrc");
        if (notFoundImgSrt) {
            $.get(notFoundImgSrt, null, function (response, status, xhr) {
                if (xhr.status === 200)
                    elem.src = notFoundImgSrt;
            });
        }
    }
}, true);

img的onerror事件是不冒泡的，所以咱们得本身手动写代码，监听document的error事件。若是当前发出error事件的目标是img标签，则找到该img标签的notFoundSrc属性，并经过ajax去判断当前站点是否存在该默认图片，若是存在该默认图片，则将其赋值该img的src属性。

 

2、设置img标签的notFoundSrc属性

  <img src="xxxxx" alt=""  notFoundSrc="images/imgNotFound.png"/>

由代码能够看见，xxxxx不是一个真实图片资源的路径，所以：

一、img标签必会触发其error事件；

二、因为咱们自定义了一个document的error监听事件，这时document就会捕捉img发出的error事件；

三、执行error事件的逻辑。