CODEWITHSUNDEEP
javascriptjqueryinternet-explorer
Phil
Phil

Reputation: 4224

JQuery error() function not working in IE

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>

Upvotes: 6

Views: 5293

Answers (3)

pippit
pippit

Reputation: 31

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"));
  });
 });

Upvotes: 3

mplungjan
mplungjan

Reputation: 177692

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>

Upvotes: 3

ShankarSangoli
ShankarSangoli

Reputation: 69905

Try this

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

Upvotes: 0

Related Questions