西门的后花园

一个热爱网络的年轻人的博客

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,之前的文章有提到过。

评论列表

  1. 哈哈哈,果然名字高大上了!!!

  2. 围观Zepto大神

  3. 不错不错,支持支持,哈哈

  4. DEMO里头好像没有懒加载啊,感觉打开就全部加载了

    • 一是我预加载,距离屏幕100px就开始加载下面的图片。
      二是图片很多地方是白色的,你没看出来。
      是否全部加载,浏览器里看http请求就知道。

  5. 值得拥有嘿嘿~

  6. 好像只能看看,自己弄不成

  7. 我等懒人还是懒得用这些技巧了~

  8. 现在越来越懒的折腾了,lazy load直接用了网上的插件。期待你的神作。

  9. ……….. 不折腾

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

  11. 移动端开发就一坑

  12. 参见西门大官人 😀

  13. 难得一见

    什么时候更新下,加上fadein呀

  14. chb

    请教大神一个问题
    http://pan.baidu.com/s/1o6KO4lG
    这个文件中上传的图片想要压缩,如何操作

  15. 九蛋

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

    让父div有个宽高,背景图片gif 中心居中。 图片加载完成后,img宽度100%,父div删除一个class,没了高度和背景图片,

    • 我的理解,你是要背景有一个loading图,然后图片加载出来,这个loading消失?
      其实可以换个思路呀,把loading图做背景图片,居中,图片加载出来后,自然把loading给盖住了,不就解决了吗?

  16. ff

    好像更新的载入成功没有加载图片,要下拉滚动条才显示

  17. Ray

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

  18. 我相信

    大神

  19. Wayne

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

西门进行回复 取消回复

分类目录