How do these elements fade out on this site?

How do these sites implement fading effect?

Notice this site carefully:

http://blog.insicdesigns.com/2010/06/best-html5-media-player-implementations/

As you scroll down, you see a little fade effect for images/videos etc. It only happens on开发者_运维百科ce. Can anybody let me know how is this done?

Thanks.

Looks like this is done with jQuery and the lazyload jQuery plugin. The plugin is available here: http://www.appelsiini.net/projects/lazyload

It's very simple to use, you tag all the images you'd like to load with a class, like .lazy. Then you use this to "select" for those tagged images and the plugin does the heavy lifting. You have to include the jQuery library file and the plugin file with <script> tags, and then a simple script kicks it off:

jQuery(".lazy").lazyload({ 
    placeholder : "http://mysite.com/placeholder.gif",
    effect : "fadeIn"
});

This puts the placeholder image in until you scroll into view, and uses the fadeIn effect to display the image.

Looks like they are using jQuery LazyLoad plugin for this effect.