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

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

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

Add jQuery error handling to all images on JSF pages inside lists, grids

javascript

jquery

jsf

primefaces

jsf-2