如何在滚动时进行图像淡入效果（如mashable.com） [英] How to do the image fade-in effect upon scroll (like mashable.com)

问题描述

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

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滚动到图像，它会淡入。它不会在页面加载时消失，只会在屏幕上项目的实际外观上消失。

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.

谢谢。

推荐答案

使用jQuery插件实现延迟加载。

It's achieved with the jQuery plugin Lazy Load.

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

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'});
}

这篇关于如何在滚动时进行图像淡入效果（如mashable.com）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！