1

I am trying to hide an image when there is no image found.

.js file:-

jQuery("#imgUrl").error(function () {
        jQuery(this).hide();
});

jsp:-

<img id="imgUrl" src="{imgSrcUrl}" alt="image")/>

Firefox and IE browsers its working when image file is not available. Please help. Example:- imgSrcUrl => src="/images/category/aline.jpg" and this image file is not available.

user1769790
  • 1,183
  • 3
  • 11
  • 23
  • 1
    My guess is the error handler is happening before you bind to it. i wonder if it propagates... add this to the `` after including jQuery to test: `$("body").on("error",function(e){ console.log(e.target.id,e.target.src); })` – Kevin B Sep 12 '13 at 18:21

1 Answers1

2

Working DEMO

Try this

Put this code in the head tag

<script>
jQuery(document).ready(function () {
    jQuery("#imgUrl").error(function () {
        jQuery(this).hide();
});
 });
</script>
SarathSprakash
  • 4,614
  • 2
  • 19
  • 35
  • I see this working only once I am the page for the first time. I have a form submission to reload my page. Upon reload it fails again. F5 - refresh also fails (only in Chrome) – user1769790 Sep 13 '13 at 16:09
  • @user1769790 May be problem with your remaining code,Please Post your code – SarathSprakash Sep 15 '13 at 10:28
  • I spent some time in google search for this issue and it is evident that Chrome got this issue. Suggestions I found are:- 1. use a plugin from available in github. 2. http://stackoverflow.com/questions/3877027/jquery-callback-on-image-load-even-when-the-image-is-cached – user1769790 Sep 16 '13 at 18:27