郑德才博客

淡入效果

不在可视范围内的图片不会加载。滚动时按需加载。图片出现时使用的是jquery的淡入效果。请清空缓存重新测试一下。

可以如下demo页面作比较:没有淡入效果的。

$("img.lazy").lazyload({
    effect : "fadeIn"
});

<img class="lazy" data-original="img/example.jpg" width="765" height="574">

启用插件

不在可视范围内的图片不会加载。滚动时按需加载。请清空缓存重新测试一下。

可以如下demo页面作比较:                禁用插件，淡入效果，水平滚动，容器内水平滚动。

$("img.lazy").lazyload();

<img class="lazy" data-original="img/example.jpg" width="765" height="574">

水平滚动效果

可见区域的右方图片不会被加载，向左滚动时按需加载。

可与以下demo页面作比较:                禁用插件，页面内存在N多图片。

$("img.lazy").lazyload({
    effect: "fadeIn"
});

<img class="lazy" data-original="img/example.jpg" width="765" height="574">

容器内水平滚动效果

可见区域的右测图片不会被加载，向左滚动时按需加载。

可与以下demo页面作比较:                禁用插件，页面内存在N多图片。

$("img.lazy").lazyload({
    container: $("#container")
});