Question

I’m using the following to load a placeholder for missing images:

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

and here’s the odd part — its replacing some of the missing images but not all. I’ve verified that its not a selector issue by adding:

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

and its selecting all the proper images … but for whatever reason only performing the replacement on some of them.

Answer 1

Thanks to @Mrchief I got pointed in the right direction; I realized that all I had to do is set the image source to itself after the document was done loading — since the error handler would now be set, it would load the proper default image:

$(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'));   
  });
});