Trust
Trust
  • 发布:2016-11-16 12:41
  • 更新:2019-03-12 15:02
  • 阅读:16608

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

分类: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。

7 关注 分享
lhyh diken 3***@qq.com 林更新 1***@qq.com y***@qq.com 9***@qq.com

要回复文章请先登录注册

白天的黑

白天的黑

vue+mui,要使用mui的懒加载为什么显示不了图片呢?使用了data-lazyload,引入了三个js文件。检查页面,标签页变了,但是就是显示不出来,普通的src可以显示
2019-03-12 15:02
1***@qq.com

1***@qq.com

如果一个页面内所有图片都要懒加载的情况下,如何编写JS
2019-03-06 16:07
云钦

云钦

和jq冲突?
2017-06-09 11:00
3***@qq.com

3***@qq.com

mark
2017-03-21 15:09
jwenlee

jwenlee

nice,感谢分享
2017-02-07 13:13
x***@foxmail.com

x***@foxmail.com

感谢分享
2016-11-16 16:46
lhyh

lhyh

感谢分享
2016-11-16 14:16