jQuery images with fadeIn() don't load when page is cached or accessed via back button

Question

At the beginning of my script, I have:

jQuery(function() {
  jQuery('img.thumbnail').hide().load( function() {
    jQuery('img.thumbnail').fadeIn();
  });
});

Which nicely fades in all the thumbnails on the page as they are loaded. However, when I access the page for a second time (when it is cached), or when I press the back button in the browser, the images stay hidden and never appear. I have to manually refresh the page.

What am I doing wrong?

Thanks.

Answer 1

Try this, since .load() may not fire on all browsers when fetching from cache:

jQuery(function() {
  jQuery('img.thumbnail').hide().each(function() {
     if (this.complete)
        $(this).fadeIn();
     else
        $(this).load( function() { $(this).fadeIn(); });
  });
});

Answer 2

Have you tried adding it to a $(document).ready() statement? Then it should run whenever the page is done loading.