I don't understand. How does that make the image useless? It should be visible by JS and non-JS browsers, except that JS browsers will see it fade in. Am I missing something? -Hector
On Sat, Apr 4, 2009 at 3:55 PM, Derba <ryancolantu...@gmail.com> wrote: > > Well, I that was the first thing I thought of, but I generally try to > avoid that as it renders the image useless if the browser does not > have javascript enabled. If this was just a minor part of the webpage > it wouldn't be that big of a deal. But I am using this for an image > gallery that is the main purpose of the site, so I don't want no > javascript to mean that the website is rendered useless. > > On Apr 4, 7:48 pm, Hector Virgen <djvir...@gmail.com> wrote: > > 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. >