jquery - 将加载和错误事件附加到动态图像

Question

我正在尝试将 load 和 error 事件附加到一些动态加载的图像。这是代码:

$(document).on('load', '.no-image-aware', function(){
    $(this).on('error', function(){
        $(this).attr('src','../resources/images/no-image.jpg');
    });
});

这不起作用。甚至:

$(document).on('load', '.no-image-aware', function(){
    console.log($(this));
});

不在控制台中打印任何内容。

但是如果我这样做:

$('.no-image-aware').load(function(){}).error(function(){
    $(this).attr('src','../resources/images/no-image.jpg');
});

它有效。但它仅在组件创建时存在样式类 no-image-aware 的图像时才有效。

我正在使用 ADF Faces。在 ADF Faces 中，某些组件会稍后加载其子组件。因此，我需要将事件处理程序作为父组件的后代附加到这些图像。但这不太可能是 ADF Faces 问题。我想要的是为 future 的图像添加 load 事件。

是否可以将 load 事件附加到图像上？对于点击或鼠标悬停它有效。那么为什么不加载加载呢？

我正在使用jQuery 1.10.0。任何指针都会对我非常有帮助。

这里是JSFiddle它模拟了我真正想要实现的目标。

Answer 1

虽然这可能不是您正在寻找的解决方案(并且很可能是不好的形式)，但我相信它成功地识别了 error()和load()事件。

您可以做的是每次请求新图像时添加新的事件监听器。

我认为问题在于load()事件不能附加到任何静态(非动态)父元素，因为它们不是 load() 的项目编辑。

作为 few other questions吟诵，load()事件不会“冒泡”。我同意 answer posted here 。 wikipedia entry还解释了哪些事件会冒泡。由于鼠标悬停并单击执行，因此单击父元素中的任意位置都会被“捕获”，并且只有当您的选择器与单击的内容匹配时才会触发。

accidentally chaining the load event to the body element 在这个问题中经历了类似的(但一次性的)动态元素创建加载事件捕获。 .

我修改了你的JSFiddle反射(reflect)我认为可以实现您所寻求的目标的方法。

本质上:

var image = $('<img src="..." class="images"/>');
$(".imageContainer").append(image);
// Once they are added to the document, you may begin 
// listening for the load event
$(".images").on("load", function() {...});

如果您添加了大量图像我不知道这会如何影响性能，但我认为这可能是目前唯一的收听方式。

另一个选项可能是将函数名称或内联编码添加到 onerror您的<img>的属性标签(可能还有加载)。如果行为足够简单，您可能根本不需要添加监听器，而是将内联 JavaScript 附加到每个新图像。我能够使用以下方法成功隐藏无法正确加载的图像:

<img ... onerror="this.style.display='none'" ... />

礼貌this answer (或this one)。