使用handlebars.js时无法检测到IMG jQuery错误事件。 如何修复这些损坏的图像？

Question

I'm having trouble detecting the error event of an image with a broken source.

The image is created in handlebars like this:

<img src="{{image}}" alt="the image">

I'm trying this code:

console.log('first log');
$('img').one('error', function() {
    console.log('image error detected');
    this.src = "<my other image path here>";
 });

I can't get my console.log, unless I hit "back" and then "forward" in the chrome browser navigation bar. The replacement of 'this.src' also works if I hit "back" and then "forward".

I've tried many things like .load or putting this code in document ready, etc.

When I view the console, I see the two GET's for the two images on this page, followed by the "first log" above. So, the images are hitting the error event well before my listener has been binded. Or something like that maybe...

Any suggestions?

Answer 1

Finally got this working. I'm sure there is a better way, but this is what did it for me:

  if ($('[data-path="/blahblah"]').length) {
    $('.myClass img').each(function() {
      var image = $(this);
      if (image.context.naturalWidth == 0 || image.readyState == 'uninitialized') {
        image.unbind('error').attr("src", "<placeholder src here>");
      }
    })
  }