Jquery fadeIn not working first time around in FF. Why?

Question

Issue: When page runs in FF 3.6 the fadeIn doesn't show, until after you've cycled through the galleries, then it works. How can I fix this?

Jquery Code

    $(document).ready(function() {
      $("#gallerylinks a").each(function(index){
        $(this).click(function(){
          $(".gallerymain").hide();
          $("#gal"+index).fadeIn();
        });
      });
    });

HTML Code

<table width="960" border="0" cellspacing="0" cellpadding="0" id="gallerylinks">
      <tr>
        <td><a href="#"><img src="images/somename1.jpg" width="240" height="186" /></a></td>
        <td><a href="#"><img src="images/somename2.jpg" width="240" height="186" /></a></td>
        <td><a href="#"><img src="images/somename3.jpg" width="240" height="186" /></a></td>
        <td><a href="#"><img src="images/somename4.jpg" width="240" height="186" /></a></td>
      </tr>
    </table>

Answer 1

The fade won't work correctly because the images aren't loaded the first round, instead of this:

$(document).ready(function() {

Do this:

$(window).load(function() {

The difference is that window.onload waits for images to be loaded, so they'll be there before the code runs...even the first time :)

Alternatively, you can pre-load the images when loading the gallery, there are many options out there for this.

Answer 2

You should try this:

$(window).load(function(){
  $('#gallerylinks a').click(function(){
    $(".gallerymain").hide();
    $("#gal"+index).fadeIn('fast');
  });
});