You may want to try a different approach. For example, you could use javascript to add a new style rule to the CSS that sets the image to visibility: hidden. This would have to happen *before* the dom has finished downloading to ensure that it always hidden, so no need to wrap it in $(document).ready(). document.write('<style type="text/css">#mainimage{visibility:hidden}</style>');
Then, in your $(window).load(), you can set the visibility: visible before calling animate. $(window).load(function() { //when everything is finally loaded, fade image in document.write('<style type="text/css">#mainimage{visibility:visible}</style>'); $("#mainimage").animate({opacity: "1"}, 1000); }); I hope this helps. -Hector On Sat, Apr 4, 2009 at 3:35 PM, Derba <ryancolantu...@gmail.com> wrote: > > I'm trying to have jquery set an image's opacity to 0. Then, while the > image is fully loaded, it will fade the image in. > > It seems to work fine, unless the images have already been viewed in > the browser and are stored in cache. In this case, the image is > already loaded by the time of $(document).ready, then it fades out, > then fades back in. > > I'm doing it like this: > Code: > > $(document).ready(function() { > $("#mainimage").animate({opacity: "0"}, 0); > }); > > > $(window).load(function() { > //when everything is finally loaded, fade image in > > $("#mainimage").animate({opacity: "1"}, 1000); > }); > > > Am I just going about this the wrong way? Or is there a way to set the > opacity to 0 before $(document).ready? > Still somewhat new to jquery, so if I am making a stupid mistake, my > bad. Any help would be great.