javascript - 将 jQuery 错误处理添加到 JSF 页面上列表、网格内的所有图像

Question

首先，介绍一些背景知识。我想要完成的是我的 JSF 应用程序的客户端错误处理程序，用于在图像加载失败时执行某些操作。这个东西有点复杂，所以我将选择一个简单的示例，它执行类似的操作，它将 src 属性重写为不同的图像。此外，我的图像存储在 Amazon S3 上，因此图像请求不会通过我的 JSF 应用程序中的过滤器传递，我希望保持这种状态。

实际上，我想对应用程序范围内的所有图像执行此操作(带有一些修饰):

$('img').error(function() {
  var newImage = 'somethingbasedofftheoriginalurl.jpg'; //pseudocode
  $(this).attr('src','newImage');
}

我遇到的问题是它不适用于动态列表或网格，例如 Primefaces DataGrid。它将在第一页上添加图像的错误处理程序，但在使用分页器时不会为后续页面添加错误处理程序。显然，它只将处理程序附加到调用 $('img') 时存在的元素。

重点:

有没有办法在我的 JSF 应用程序中为应用程序范围内的所有图像附加客户端通用错误处理程序？它不一定是专门的 jQuery，但在客户端是必需的，直到每个人都告诉我这是不可能的......此外，将此代码放在尽可能少的地方也很重要。我不能将它添加到我的整个应用程序中的每个该死的 xhtml 页面中。

Answer 1

PrimeFaces 使用 ajax 进行分页。因此，您基本上需要做的就是在 PrimeFaces ajax 响应完成后重新执行该脚本，这可以通过自定义事件 pfAjaxComplete 观察到。

所以，总而言之，应该这样做:

$(document).on("pfAjaxComplete", function(event, xhr, options) {
    // Do the job here.
});