Swap div with image once loaded [kinda solved]

I have a large image (500k). I have a div (which says loading etc etc). I want the div to be swapped with the large image once the large image is loaded.
I'm stuck trying to work out how to get jQuery to check if an image is loaded.

My effort (which will show just how much I don't know - i have just put what I would like rather than syntax I know exists :

      $(img.hero).load() {
      if (this).loaded {
      $("#loading").remove();
      $(".hero").fadeIn("fast");
      }
      else {
      check again
      }
     });

For this HTML

<div id="loading">
   <span><img src="i/hero-load.gif" border="0"> loading episode 35</span>
</div>
<img src="i/episode-trans.png" class="hero"> <!-- initially display:none in css -->

There may be a totally different way to approach this and I am open to them. Thanks all.

• Topic Participants

• daniel08

• mike.conway

• mikebranski