2

I want to show images only when they are loaded successfully (some paths give 404). Have following code, which works fine.

<script>
    $(document).ready(function() {
      $(".complex-image").load(function(){
          $(this).show();
      });
    });
</script>

Now, one of the pages shows a google map, which sets:

onload = initMap
onunload = GUnload

On this page in IE8 and Chrome, image does not show up even when available. But shows up fine in Firefox 4. A sample page having image+map from my site is this

I have tried the inverse approach as well: hide images when there is error in loading. Using code below:

<script>
    $(document).ready(function() {
      $(".complex-image").ready(function(){
          $(this).hide();
      });
    });
</script>

This does not hide images on IE8 both on map and non-map containing pages.

What is a cross-browser way to show images when loaded successfully, when there is a body onload defined?

Edit: Used Elzo's solution and to get img.load() fired even when image is getting read from cache, used this: jQuery callback on image load (even when the image is cached)

Community
  • 1
  • 1
tarkeshwar
  • 4,105
  • 4
  • 29
  • 35

1 Answers1

4

Here is how to do it. I put also a demo.

Elzo Valugi
  • 27,240
  • 15
  • 95
  • 114
  • I think another way is to check the image object is not null or undefined. Ok, it is not so beatuefil like your example, but it also should work. – Reporter May 19 '11 at 13:12
  • Thanks! To get img.load() to fire even when image is getting read from cache, enhanced the solution using [link](http://stackoverflow.com/questions/3877027/jquery-callback-on-image-load-even-when-the-image-is-cached) – tarkeshwar May 19 '11 at 15:34