Question

我正在使用以下内容加载占位符以查找丢失的图像：

$(document).ready(function() {
  $('.p-box img').one('error', function() {
    $(this).attr('src', 'http://www.perfectly-valid-domain/placeholder.jpg');
  });
});

这是奇怪的部分 - 它取代了一些缺失的图像，但不是全部。我已经通过添加以下内容验证了它不是选择器问题：

console.log( $('.p-box img') );

并选择所有正确的图像...但无论出于何种原因，仅对其中一些图像进行替换。

Answer 1

如果您在document.ready上进行此操作，可能是某些图片已加载（或失败）。因此，当处理程序连接时，负载已经发生。

解决此问题的一种方法是在document.ready中动态创建图片并附加到p标记。

类似的东西：

var img = $('<img />');
img.one('error', function() {
    $(this).attr('src', 'http://www.perfectly-valid-domain/placeholder.jpg');
});
img.attr('src', 'imgURL.jpg');
$('.p-box').append(img);

Answer 2

感谢@Mrchief，我指出了正确的方向;我意识到我所要做的就是在文档加载完成后将图像源设置为自身 - 因为现在将设置错误处理程序，它将加载正确的默认图像：

$(document).ready(function() {
  $('.pbox img').one('error', function() {
    $(this).attr('src', 'http://site.com/placeholder.jpg');
  });

  $('.pbox img').each(function() {
    $(this).attr('src', $(this).attr('src'));   
  });
});

图像错误处理程序适用于某些图像但不适用于其

2 个答案: