郑德才博客 记录学习,记录工作,学习知识分享!

jQuery延迟加载插件(懒加载) - jquery.lazyload.js

淡入效果

不在可视范围内的图片不会加载。滚动时按需加载。图片出现时使用的是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")
});
2016年1月13日 | 发布:郑德才博客 | 分类:网络文摘 | 评论:6

留言列表:

  • 每天签到赚10元 发布于 2016/2/18 15:19:24  回复
  • 不错不错
  • 松松论坛 发布于 2016/2/24 14:23:01  回复
  • 专业的啊,看不懂呢
  • 松松论坛 发布于 2016/2/26 14:34:44  回复
  • 膜拜大神代码
  • 威客网 发布于 2016/2/27 17:00:28  回复
  • 技术文章,支持下
  • themebetter 发布于 2016/2/29 17:14:52  回复
  • 技术类博客,支持一下。(themebetter更好的主题)
  • 论文写作服务的评论 发布于 2016/8/10 20:49:28  回复
  • 楼主做的很好,赞赞。

发表留言: