如何在滚动时进行图像淡入效果（如 mashable.com）答案

【问题标题】：How to do the image fade-in effect upon scroll (like mashable.com)如何在滚动时进行图像淡入效果（如 mashable.com）
【发布时间】：2011-02-14 14:22:45
【问题描述】：

我想知道 mashable.com 上图像的淡入效果（例如，请参阅 http://mashable.com/2009/08/14/google-android-logo-remixes/）

当您滚动到图像时，它会淡入。它不会在页面加载时淡入，只会在项目在屏幕上的实际外观时淡入。

谢谢。

【问题讨论】：

您可以使用 JQuery 判断一个 HTML 元素在页面上是否可见，并在它可见时立即调用任何函数：stackoverflow.com/questions/487073/…

标签： javascript animation fade effect

【解决方案1】：

这是通过 jQuery 插件Lazy Load 实现的。

编辑：这是他们使用的代码：

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

【讨论】：

谢谢，我认为它类似于“延迟加载”和“延迟加载”：)

【解决方案2】：

找到了懒加载的mootools版本http://davidwalsh.name/mootools-lazyload

【讨论】：

【解决方案3】：

YUI version 也可用。事实上，Lazy Load 就是受到了它的启发。

【讨论】：

【解决方案4】：

还有一个jQuery version of lazyload。

【讨论】：

【解决方案5】：

不幸的是，延迟加载插件在大多数实际浏览器中都不起作用，according the own author says in the official web site。

但是jQuery Appear Plugin 做的几乎一样！ ;-)

【讨论】：