Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why is Chrome's onerror event for the img element only fired once?

Why is Chrome is only calling the onerror event for the img element one time when all other browsers (IE7,8,9, FF, Opera, and Safari) all call it repeatedly?

Is there a way to force it to repeat the onerror call again (in Chrome)?

jsfiddle

HTML:

<div id="thisWorks">
    this works in Chrome. onerror event is called once.
    <img src="http://www.asdfjklasdfasdf.com/bogus1.png" 
        onerror="fixit(this);" 
        rsrc="http://eatfrenzy.com/images/success-tick.png" />
</div>

<div id="thisDoesNotWork">
    this does not work in Chrome. onerror event is not called twice.
    <img src="http://www.asdfjklasdfasdf.com/bogus1.png" 
        onerror="fixit(this);"
        rsrc="http://www.asdfjklasdfasdf.com/bogus2.png|http://eatfrenzy.com/images/success-tick.png" />
</div>

JAVASCRIPT:

function fixit(img)
{
    var arrPhotos = img.getAttribute('rsrc').split('|');

    // change the img src to the next available
    img.setAttribute('src', arrPhotos.shift());

    // now put back the image list (with one less) into the rsrc attr
    img.setAttribute('rsrc', arrPhotos.join('|'));

    return true;    
}

EDIT: Per @Sunil D.'s comment about Chrome not issuing a new lookup due to invalid domain name of www.asdfjklasdfasdf.com in the initial fiddle example, I went ahead and changed the domain name to match that of the success image, but with a different filename so it still is a 404. That will prove it's not the invalid domain name causing Chrome to bail out on the 2nd attempt.

EDIT: Updated fiddle and removed use of jquery to simply things and rule that out.

like image 461
johntrepreneur Avatar asked Jul 14 '13 04:07

johntrepreneur


People also ask

What is Onerror in IMG tag?

Definition and Usage. The onerror event is triggered if an error occurs while loading an external file (e.g. a document or an image). Tip: When used on audio/video media, related events that occurs when there is some kind of disturbance to the media loading process, are: onabort.

Is IMG Onerror deprecated?

This feature is deprecated/obsolete and should not be used.

What is the use of JavaScript Onerror event?

What is onerror() Method in JavaScript? The onerror event handler was the first feature to facilitate error handling in JavaScript. The error event is fired on the window object whenever an exception occurs on the page.

How do I display an alternate image in HTML?

The required alt attribute specifies an alternate text for an image, if the image cannot be displayed. The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).


2 Answers

I've tried the ways metioned above, setAttribute('src', null) has a side effect, ie, add another request.

Finally, I use

    setTimeout(function(){ imgElement.src = 'http://xxxx'; }, 0)

, and this works!

See the jsfiddle for example.

like image 91
Jess Avatar answered Nov 09 '22 21:11

Jess


Okay got it. Inside the function you assign to the onerror event, set the src attribute to null before changing it to it's new value.

img.setAttribute('src', null);

working fiddle

This somehow causes Chrome to reset it and will force it to repeatedly call onerror if subsequent values for src return an error.

Note: an empty string won't work and needs to be null.
Note2: this fix works using pure javascript (but not with the jquery .attr method). After I posted this solution I tried it with the jquery .attr method setting it to $img.attr('src', null); but it didn't work that way and when I changed it to javascript, it worked. I also tried it using the jquery .prop method instead like so $img.prop('src', null); which worked the first time and failed on a few subsequent refreshes. Only the pure javascript seems to be a surefire solution.

UPDATE:
Okay, turns out that while the above change fixes Chrome and causes it to repeatedly call onerror like all other other browsers (FF, Safari, Opera, IE7-9), it causes problems with the onerror event for IE10 and thus ignores any valid images assigned to src after setting it to =null on the previous line. (...sigh).

like image 22
johntrepreneur Avatar answered Nov 09 '22 22:11

johntrepreneur