Javascript 如何在滚动时实现图像淡入效果（如 mashable.com）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2750776/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to do the image fade-in effect upon scroll (like mashable.com)
提问by Mahmoud Al-Qudsi
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)
我想知道 mashable.com 上图像的淡入效果（例如，参见http://mashable.com/2009/08/14/google-android-logo-remixes/）
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.
谢谢。
回答by Vincent
It's achieved with the jQuery plugin Lazy Load.
它是通过 jQuery 插件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'});
}
回答by RRG
Found the mootools version of the lazyload http://davidwalsh.name/mootools-lazyload
找到了lazyload http://davidwalsh.name/mootools-lazyload的mootools版本
回答by murrydan
There is a jQuery version of lazyloadtoo.
还有一个jQuery 版本的lazyload。
回答by Tárcio Zemel
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 Plugindo almost the same thing! ;-)
但是jQuery Appear 插件几乎可以做同样的事情！;-)
回答by Drew Noakes
A YUI versionis available too. In fact, Lazy Load was inspired by it.
一个YUI版本可用了。事实上，Lazy Load 的灵感来自于它。
