【示例】使用mui懒加载插件实现动态懒加载图文信息

依赖

• mui.js
• mui.lazyload.js
• mui.lazyload.img.js

在HBuilder中新建Hello mui示例工程中获取以上文件。
MUI在github上的开源地址最接近原生APP体验的高性能框架
在HBuilder中使用egit插件同步最新的MUI等资源

实现

以Hello mui示例工程中的lazyload-image.html例子为基础，做一些适当的调整即可。

初始化

初始化懒加载控件，设置占位图。注意，这里需要将autoDestroy属性设置为false（不自动销毁），以便后面继续调用。

var lazyLoad = mui('#list').imageLazyload({  
    placeholder: '../images/60x60.gif',  
    autoDestroy: false  
});

加载

新增一个按钮，用于新增图文信息。点击后直接调用原有的createFragment ()方法创建n个元素，并将新的元素添加至懒加载的容器中。

<!--html部分-->  
<button type="button" class="mui-btn mui-btn-blue mui-btn-block" id="get_list">加载图文信息</button>

// JavaScript部分  
var list = document.getElementById('list');  
document.getElementById('get_list').addEventListener('tap', function() {  
    list.appendChild(createFragment(5));  
});

不过，这样仅仅将元素添加至容器内，是不会实现懒加载的。简单测试下，从结果可以看到，图片信息并未加载。

刷新

每次添加新的图文信息，需要刷新懒加载控件。也就是通知懒加载容器，有新的元素进来了，需要加载一下图片信息。
那么，按钮tap事件的回调函数，需要调整为以下代码：

list.appendChild(createFragment(5));  
lazyLoad.refresh(true);

此时，再进行测试，就可以看到所预期的懒加载效果。

附件

修改后的lazyload-image.html，见附件lazyload-image.zip。