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.
>
