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

我试图将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问题。我想要的是为以后的图像添加load事件。

是不是可以将load事件添加到图像？对于click或mouseover它的作品。那么为什么不为load？我使用jQuery 1.10.0。任何指针都会对我非常有帮助。

这里是JSFiddle模拟的东西实际上我想实现的东西。

来源

2013-11-22 Tapas Bose

您是否找到了解决方案？我gavinf完全相同的问题 –

@RommelCastro no我还没有找到任何解决方案，这个问题。 –

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

你可以做的是每次添加新的事件监听器已经请求一张新的图像。

我相信问题是load()事件不能附加到静态（非动态）的任何父元素，因为它们不是load() ed的项目。

作为few other questions已经声调，load()事件不会“冒泡”。我同意answer posted here。 wikipedia entry也解释了哪些事件冒泡。由于mousever和click是这样做的，因此点击父元素中的任何位置都会被“捕获”，并且只有当选择器匹配所点击的内容时才会触发。

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

我已修改您的JSFiddle以反映我认为可以完成您所寻求的方法。

本质：

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() {...});

如果你有添加一个非常大的数量的图像，我不知道这将如何影响性能但我认为这可能是在这听的唯一途径时间。

另一种选择可能函数名或内嵌代码添加到您的<img>标签（以及可能的onload）的onerror属性。如果行为足够简单，则可能根本不需要添加监听器，而是将内联javascript已经附加到每个新图像。我是能够成功地隐藏无法正确加载使用此图片：

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

礼貌this answer（或this one）。

来源

2014-09-15 16:04:42 veeTrain

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

回答

相关问题