Swapping image when url returns 404 not working with AJAX

Question

I have the following function as a fallback when the URL of the image returns 404. The function should happen after the AJAX. So when AJAX is made, and the URL returns 404, the image will replace the broken image. This functions works in Safari and Firefox, but not in Chrome.

When it's not working in Chrome, the console says:

imageOnError is not defined.

    function imageOnError(img) {
       img.onerror = ' ';
       img.src = "http://v.images.boldride.com/vorsteiner/2012/vorsteiner-bmw-m3-gts5.1471x972.Jul-11-2012_13.02.33.232886.jpg";
       return true;
    }

Any ideas what's going on with it?

Here is the JSFiddle

Post entire code, how you attach imageOnError function to the image object? — dfsq, Feb 22 '16 at 19:33
http://stackoverflow.com/a/17636872/2020002 have you checked that? — Derek Pollard, Feb 22 '16 at 19:33
So this is angular? Where is `imageOnError` is defined, global function? — dfsq, Feb 22 '16 at 19:42
@dfsq why would this be angular? This looks like any code with mustache-style templating (could be plain mustache, nunjucks, angular, take your pick) — Mike 'Pomax' Kamermans, Feb 22 '16 at 19:44
@dfsq, this isn't angular. It was handlebar.js was used to parse the image url. I've revised it to a broken image url. — 7537247, Feb 22 '16 at 21:24
well the fact that you are getting it intermittently means you are having a race issue where the image loads before javascript...where/how are you including the function? — David Nguyen, Feb 22 '16 at 21:24
@DavidNguyen, the function gets called when the url returns 404. — 7537247, Feb 22 '16 at 21:27

score 0 · Answer 1 · answered Feb 22 '16 at 22:16

0

When browser gets this:

<img src="http://ip.dlron.us/img.jpg"
     onerror="return imageOnError(this);">

the image's URL may already be tested against existence (and result cached) and so browser can tell right away that image is not available and call your onerror handler.

Thus your imageOnError(img) implementation shall appear in HTML before first image that uses it.

answered Feb 22 '16 at 22:16

c-smile

26,734
7
59
86

It seems to be the problem, but the page(image content) gets generated by both AJAX and HTML. – 7537247 Feb 22 '16 at 22:29
Could you elaborate more on "page(image content)" and "image content gets generated by both AJAX and HTML" ? – c-smile Feb 22 '16 at 22:39
I think the issue has something to do with the AJAX call, maybe because when AJAX renders the content, the `imageOnError function` wasn't ready or something. – 7537247 Feb 22 '16 at 23:54

score 0 · Answer 2 · answered Feb 24 '16 at 21:01

0

I ended up using jQuery to solve this problem. It actually works better than calling onerror event directly on markup. Thanks everyone's help.

$(errorImage).on('error', function(){
  $(this).attr('src', 'broken-image-url');
});

answered Feb 24 '16 at 21:01

7537247

303
5
19

Swapping image when url returns 404 not working with AJAX

2 Answers2