您当前的位置： 首页 > 学无止境 > JS经典实例 网站首页JS经典实例

jquery对未来(动态)img的onerror监听无效的解决方案

发布时间：2020-06-15 21:58:06编辑：雪饮阅读（）

对于图片加载失败，例如图片的src为空或者即便不为空，但图片地址不可访问都会触发img的onerror事件，这听起来很不错，可以用此特性解决图片加载失败时的默认破碎图片样式，提高用户体验。

但在实际使用过程中有几个坑点。

坑点1：

首先就是当触发onerror事件后若再次为其赋值（我们一般会用一个默认图片）若该值仍旧会导致加载失败，那么不比说就会恶性循环下去。对于这个坑点，我们只需要在触发后将图片地址设置之后同时也将onerror属性置为null即可。

坑点2：

第二个坑点这里用jquery举例说明，大多数事件在jquery中都支持用on进行未来绑定，也就是所谓的动态绑定监听,例如$(“img”).on(“error”)这种绑定方式是可以的，但是$(“body”).on(“error”,”img”)这种未来绑定方式就不支持，只因为error不支持向上冒泡，那么自然就不存在向下捕获了。那么针对该坑点如何解决呢，目前为止我搜集的资料来看，仅仅下面的笨拙方法可行，或许还有更好的方法吧。那么解决方法如

$('img').each(function() {

    if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {

        this.src = "%THEME%/static/img/icon_wu.png";

    }

});

对，就是这样，我们可以将图片遍历进行判断，由于我们不知道ui到底何时才能渲染完毕，所以我们可以将上面代码片段封装为方法并用定时器去执行即可。