基于plus.downloader的图片懒加载功能，支持本地缓存

基于plus.downloader的图片懒加载功能，支持本地缓存

如果有样式问题的话，请移步至http://www.cnblogs.com/phillyx/p/4649128.html

简单说一下

在app中，对一些变动不频繁的图片数据（如个人头像等），是需要存储在本地的。我相信这对大多数的app都是强需求的。  

怎么使用呢

img标签默认都有data-src属性，用来存放网络链接，src属性初始是最好给一个默认本地图片链接，下载好会自动替换掉

<img data-src="远程链接" src="默认图片">

1. 如果在列表中，通过下拉刷新、上拉刷新加载数据，加载下一页的时候可以如下做：
   一次新增多条数据时，为避免重复渲染页面及重新下载正在下载中的图片等问题，新增的img要设置data-pageno属性,如下使用arttemplate写的模板

   <script id="tmpl" type="text/html">  
   {{each items as item i}}  
           <li class="mui-table-view-cell" data-id='{{item.id}}'>  
             <img data-src="{{item.url}}" data-pageno="{{item.pageno}}" src="img/default.png">  
           </li>  
   {{/each}}  
   </script>

   在js中怎么用呢

   var html = template('tmpl', data);  
   document.querySelector("#pullrefresh").innerHTML  = html;  
   lazyImg.pageno=data.pageno;  
   lazyImg.lazyLoad();

2. 如果不需要分页或者零散的数据，直接添加lazy类就可以了

   <img data-src="远程链接" src="默认图片" class="lazy">

   然后直接调用lazyImg.lazyLoad()就可以了

注意

lazyimg.js是结合cache.js一齐使用的，代码都已提交至github
地址在https://github.com/phillyx/MUIDemos/tree/master/js/lazyimg.js
也可直接使用合并后的代码https://github.com/phillyx/MUIDemos/tree/master/dist/common.js