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.
