I have a query that has been bugging me for ages.

What is the best way to fade in  an image on a page load so that the image is visible if javascript is not supported and does not jump around all over the place if it is supported.

What I have found is that I can make it work using either document ready or on window onload however the images all load first and the page goes all crazy for a few seconds before the script actually does what it is supposed to.

What I do not want to do is hard code the css display as none for the image as a property as either an element style or in the css file. The reason being that if the script does not run... the image will never load.

Any thoughts?

Cheers.

OPTION 1

  

   
$(document).ready(function () {
   
        $('#logo').hide().fadeIn(3000);
   
    });
  

OPTION 2

     

      
window.onload = function() {$('#logo').hide().fadeIn(3000);};