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();

1. 若是不須要分頁或者零散的數據，直接添加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