JQuery error() function not working in IE

Question

I have the following image element that it's src does not exists. I want to use the jquery error function to detect if it has not loaded and replace the src with a generic image that I know exists. This works in chrome and firefox but on in IE. Why does this not work in IE and are there any workarounds? Thanks!

<img id="main" src="missing-image.jpg" />

<script type="text/javascript">

    $(function () {
        $("#main").error(function () {
            $("#main").attr("src", "generic.jpg");
        });
    });

</script>

take a look an similar question http://stackoverflow.com/questions/263359/how-can-i-determine-if-an-image-has-loaded-using-javascript-jquery — Carlos Cocom, Jul 29 '11 at 14:11
It looks like jquery ignores .error() in IE if there is no file extension on the source. I had to use the workaround Carlos mentions in the comment above. — Buchannon, Jun 11 '12 at 19:43

mplungjan · Accepted Answer · 2011-07-29T17:12:01.253

3

Timing issue?

DEMO HERE

<img id="mainImage" src="placeholder.jpg" />

<script type="text/javascript">
$(document).ready(function() {
  $("#mainImage").error(function () {
    $(this).attr("src", "generic.jpg");
  });
  $("#mainImage").attr("src","possibly_missing_image.jpg");
});

</script>

edited Jul 29 '11 at 17:12

answered Jul 29 '11 at 14:12

mplungjan

169,008
28
173
236

This still doesn't work in IE. I dont believe that "main" is a reserved word. – Phil Jul 29 '11 at 14:47
1

Note - This DOES NOT work in IE if your image source has no file extension. It looks like jquery ignores .error() in IE if there is no file extension on the source. I used something like this as a workaround: http://stackoverflow.com/questions/263359/how-can-i-determine-if-an-image-has-loaded-using-javascript-jquery – Buchannon Jun 11 '12 at 19:42
Something like this what? The deferred example [here](http://stackoverflow.com/a/9333069/295783) ? – mplungjan Jun 12 '12 at 05:45

score 3 · Answer 2 · edited Apr 27 '16 at 15:08

3

I ran into the same problem with ie and setting the img src to itself allowed enough time for ie to catch the image error

$(document).ready(function() {
  $("#mainImage").error(function () { 
    $(this).attr("src", "generic.jpg");
  })
  .each(function() {
  $(this).attr("src",$(this).attr("src"));
  });
 });

edited Apr 27 '16 at 15:08

Si8

9,141
22
109
221

answered Dec 09 '11 at 13:53

pippit

31
1

score 0 · Answer 3 · answered Jul 29 '11 at 14:08

0

Try this

$(function () {
        $("#main").bind('error abort', function () {
            $(this).attr("src", "generic.jpg");
        });
    });

answered Jul 29 '11 at 14:08

ShankarSangoli

69,612
13
93
124

2

This will bind to onabort event of image which will be fired in case of no image source. – ShankarSangoli Jul 29 '11 at 14:14
I think you're confusing `.error` with the `error()` function available as an argument of `.ajax()` – Adam Hopkinson Jul 29 '11 at 14:17
@adam - Image tag has onabort event as well. – ShankarSangoli Jul 29 '11 at 14:21
I tried changing to bind and adding "abort" but that doesn't either in IE. Is IE missing the onError event that would be mapped to? – Phil Jul 29 '11 at 14:52

JQuery error() function not working in IE

3 Answers3