How to do the image fade-in effect upon scroll (like mashable.com)

问题

I'm wondering about the fade-in effect for images on mashable.com (see http://mashable.com/2009/08/14/google-android-logo-remixes/ for example)

As you scroll to the image, it fades in. It's not fading in on page load, only upon the actual appearance of the item on-screen.

Thanks.

回答1:

It's achieved with the jQuery plugin Lazy Load.

EDIT: Here's the code they used:

if(! navigator.userAgent.toLowerCase().match('ipad')){
  $('#primary img').lazyload({effect:'fadeIn',placeholder:'/wp-content/themes/v6/_base/img/blank.png'});
}

回答2:

Found the mootools version of the lazyload http://davidwalsh.name/mootools-lazyload

回答3:

Unfortunatelly, the Lazy Load plugin not works in most actual browsers, according the own author says in the official web site.

But the jQuery Appear Plugin do almost the same thing! ;-)

回答4:

There is a jQuery version of lazyload too.

回答5:

A YUI version is available too. In fact, Lazy Load was inspired by it.

来源：https://stackoverflow.com/questions/2750776/how-to-do-the-image-fade-in-effect-upon-scroll-like-mashable-com