[jQuery] Re: How do I fade images onLoad, on the fly?

[Brian Schilt]

I have an idea for ya, I haven't actually done this before, but this
is the way I would approach something like this.

First, I would recommend updating your markup so that the pictures in
each portfolio group (web design, print design, identity etc...) is
inside of its own container. Second, add a class of 'image-container'
to each <div> that surrounds the actual image.

<div id='container'>
  <div class='image-group'> <!--add new container for web design-->
    <div class='image-container'>
      <a href='#'><img src'...'/></a>
    </div>
    <div class='image-container'>
      <a href='#'><img src'...'/></a>
    </div>
    <div class='image-container'>
      <a href='#'><img src'...'/></a>
    </div>
  </div>
  <div class='image-group'> <!--add new container for print design-->
    <div class='image-container'>
      <a href='#'><img src'...'/></a>
    </div>
    <div class='image-container'>
      <a href='#'><img src'...'/></a>
    </div>
    <div class='image-container'>
      <a href='#'><img src'...'/></a>
    </div>
  </div>
</div>

Update your style sheet to hide all .image-container classes.

.image-container{
  display:none;
}

Now use Ariel Flesler's image preload plugin found here:
http://flesler.blogspot.com/2008/01/jquerypreload.html. This plugin
will allow you to preload all images withing an image-group, then you
can utilize the onFinish callback to fade in the images withing a
particular group when they are done preloading. This way the images in
each image group can display independently of other image-groups.

$(document).ready(function(){
  $('image-group').each(function(){
    $(this).find('.image-container a').preload({
      onFinish: function(){
        $('.image-container').fadeIn(1000); //show all images
      }
    });
  });
});

This is just a starting point, I haven't actually coded this up so I
may be full of crap. But this is the direction I would first proceed
if I were to develop it. Lemme know how it progresses.

Brian

On Jul 21, 12:08 pm, Heath <[EMAIL PROTECTED]> wrote:
> Hey guys
>
> So I have a pretty basic portfolio site and I'd like to add some
> subtle effects to it. Site is herehttp://www.hbeckett.com
>
> Here is what I'm trying to do: As an image is loaded, fade it in.
> Repeat for all images.
>
> Currently I know how to fade in the entire page, and I am using this
> script:
>
>  $(window).load(function () {
>     $("#masthead").fadeIn(1000);
>         $("#container").fadeIn(4000);
>   });
>
> However, the above technique makes the user wait too long before
> seeing any actual content, so I'd rather go with loading and fading
> pieces at a time rather than the whole shebang.
>
> All of my images are within #container. Ideally I would like to fade
> in #container div once the content for that particular div is loaded.
>
> Does anybody know a good way to go about doing this? Thanks.