首页 > 移动平台 > 详细

webapp图片懒加载实现

时间:2015-12-07 11:54:47      阅读:172      评论:0      收藏:0      [点我收藏+]

  图片懒加载在webapp上非常流行,应用的很广泛。

实现图片懒加载功能:zepto.picLazyLoad.min.js

引入类库

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

在需要实现懒加载功能的img标签上加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({
  //可以不写参数 threshold: 100, placeholder: ‘http://image.yihaodianimg.com/front-homepage/global/images/blank.gif‘ });                                      

webapp图片懒加载实现

原文:http://www.cnblogs.com/lie-1992/p/5025492.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!