Detect "image Corrupt Or Truncated" In Firefox

(Pre-emptive strike: If you're tempted to mark this as a duplicate, note that other questions seem to ask 'why am I getting this error?' I know why I'm getting this error; I want t

Solution 1:

It appears that when changing the src attribute of the img tag, Firefox fires a load event. This is contrary to the HTML5 specification, which says that if the src attribute is changed, then any other fetch already in progress should be ended (which Firefox does), and no events should be sent. The load event should be sent only if the fetch was completed successfully. So I'd say that the fact that you get a load event is a Firefox bug.

However, the image should know if it is fully available or not, you could try to use the complete attribute:

if (this.complete === false) {
  return;
}

Unfortunately, Firefox has this.complete set to true instead, so that's not an option either.

The best option may be to create a new <img> element each time you wish to change the src attribute.

Solution 2:

I was dumbfounded by this issue today myself. Everything was working fine (the images loaded visually as expected) except that the error kept showing up in Firefox error console - no such errors in IE or Chrome though.

In my case I was plugging an image into a div with innerHtml in an on complete jquery handler. The errors stopped when I preempted the jquery call with:

var image_holder = new Image();
image_holder.src = img_path;//path of image that's going to be plugged in  

It worked for me, but it still makes no sense. I assume it's something to do with timing as this code initiates the image to load before it gets to the code that actually plugs it into the page.