MUI - 基於plus.downloader的圖片懶加載功能，支持本地緩存

基於plus.downloader的圖片懶加載功能，支持本地緩存

簡單說一下

在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