Zepto picLazyLoad Plugin，图片懒加载的Zepto插件

嗯，学着国外人起名字Zepto picLazyLoad Plugin确实看起来高大上，其实js代码没几句，而且我每次写js都捉襟见肘，泪奔～～～

图片懒加载有很多js插件，非常著名的属jQuery的Lazy Load了。自己做手机项目上也需要图片懒加载，而且手机上的图片懒加载有两种：一种是普通img标签的，一种是div标签（或者其他标签）上加背景图片的。所以就练手写了个支持以上两种情况的Zepto小插件。

功能：

支持img标签图片懒加载、div标签（或者其他标签）的背景图片懒加载；
支持预加载。默认是图片出现在屏幕时开始加载，可以设置threshold参数，如threshold:100，此时图片出现在屏幕之前100px时开始加载；
背景图片懒加载时，自动添加base64的1*1透明图片做默认背景图。也可以自定义默认背景图，参数为placeholder。

使用方法：

引用1.1.3的Zepto（我只测过这个目前最新版），并引用picLazyLoad.js。→picLazyLoad.js← →picLazyLoad.min.js←

<script src="1.1.3/zepto.min.js"></script>
<script src="1.0/zepto.picLazyLoad.min.js"></script>

在要懒加载的标签上，加类名或者id名，方便调用。在标签上加data-original="original.jpg"，original.jpg为实际加载图片路径。如果是img标签，还需要加src="blank.png"。blank.png为默认背景图，建议用base64图。例如：

<img class="test-lazyload" src="blank.png" data-original="original.jpg">
<div class="test-lazyload" data-original="original.jpg"></div>

调用：

$('.test-lazyload').picLazyLoad();

如需加参数：

$('.test-lazyload').picLazyLoad({
    threshold: 100,
    placeholder: 'http://image.yihaodianimg.com/front-homepage/global/images/blank.gif'
});

→示例DEMO←

已知问题：

iPhone 5S 7.1.1里，所有浏览器，网页滑到下面，刷新网页，不执行onscroll方法，获取不到scrolltop值。导致此时刷新网页，网页下方的图片没有默认加载。

待增加功能：

现在是直接显示图片show，以后增加fadeIn图片淡入；
现在是只能根据窗口懒加载图片，待增加根据容器、tab选项卡等。

小提示：

使用背景图片比使用img标签懒加载浏览器显示速度要快，不知道是不是后者多了一步替换src路径操作导致的；
如果要兼容更多的设备，使用背景图片可以显示更清晰，因为可以设置background-size，之前的文章有提到过。

评论列表

瘟疫

回复

2014/05/17 at 15:36

哈哈哈，果然名字高大上了！！！
雨帆

回复

2014/05/17 at 15:41

围观Zepto大神
- 西门
  
  回复
  
  2014/05/17 at 18:56
  
  毛的大神
分享好东西

回复

2014/05/17 at 20:38

不错不错，支持支持，哈哈
郑永

回复

2014/05/17 at 21:59

围观。。
神父

回复

2014/05/18 at 11:38

DEMO里头好像没有懒加载啊，感觉打开就全部加载了
- 西门
  
  回复
  
  2014/05/18 at 12:30
  
  一是我预加载，距离屏幕100px就开始加载下面的图片。
  二是图片很多地方是白色的，你没看出来。
  是否全部加载，浏览器里看http请求就知道。
  - 亚伦
    
    回复
    
    2018/01/18 at 10:32
    
    老大，能帮我看看代码吗？我的QQ：1078395977
斌果

回复

2014/05/18 at 16:49

路过帮顶
- Q先生
  
  回复
  
  2014/05/19 at 13:39
  
  鲁过。。。
M.J

回复

2014/05/19 at 08:41

屌炸天！
烂番茄

回复

2014/05/19 at 13:41

值得拥有嘿嘿~
动漫情报

回复

2014/05/19 at 22:02

好像只能看看，自己弄不成
Jimmy

回复

2014/05/20 at 03:03

路过
tumutanzi

回复

2014/05/20 at 03:33

我等懒人还是懒得用这些技巧了~
子痕

回复

2014/05/20 at 11:55

现在越来越懒的折腾了，lazy load直接用了网上的插件。期待你的神作。
灰常记忆

回复

2014/05/20 at 14:18

……….. 不折腾
牧风

回复

2014/05/23 at 13:34

移动端框架太多坑了, zepto也只能解决一点问题
上邪

回复

2014/05/23 at 17:54

移动端开发就一坑
余人陶艺

回复

2014/05/26 at 10:39

参见西门大官人 😀
难得一见

回复

2015/09/05 at 12:27

什么时候更新下,加上fadein呀
- 西门
  
  回复
  
  2015/09/29 at 17:51
  
  后来我改成纯js了，有兴趣你看看，有fadeIn：https://github.com/ximan/picLazyLoad
chb

回复

2015/09/20 at 21:36

请教大神一个问题
http://pan.baidu.com/s/1o6KO4lG
这个文件中上传的图片想要压缩，如何操作
- 西门
  
  回复
  
  2015/09/21 at 21:55
  
  https://github.com/think2011/localResizeIMG4
  这个可能对你有用
  - 天赋异禀
    
    回复
    
    2017/02/15 at 15:09
    
    May the codes is far away from bugs by the animal protection!
九蛋

回复

2015/11/11 at 10:28

我需要图片加载完成的回调函数，比如增加一个class

让父div有个宽高，背景图片gif 中心居中。图片加载完成后，img宽度100%，父div删除一个class，没了高度和背景图片，
- 西门
  
  回复
  
  2015/11/11 at 10:56
  
  我的理解，你是要背景有一个loading图，然后图片加载出来，这个loading消失？
  其实可以换个思路呀，把loading图做背景图片，居中，图片加载出来后，自然把loading给盖住了，不就解决了吗？
ff

回复

2015/11/27 at 13:52

好像更新的载入成功没有加载图片，要下拉滚动条才显示
- 西门
  
  回复
  
  2015/11/27 at 15:56
  
  有demo看看么
Ray

回复

2015/12/02 at 10:11

在微信中点击后退如果不动页面只显示默认图片不会加载实际图片。请问是什么原因？
我相信

回复

2016/03/14 at 22:08

大神
Wayne

回复

2016/11/23 at 14:50

我觉得这个插件存在个问题，快速下拉时会高频触发lzayload函数，大量图片资源启动下载，移动端体验肯定有所欠缺。建议写个判断滚动停止事件的函数，设置为停止滚动时触发。