流加载
该模块包含信息流加载和图片懒加载两大核心组成,其对服务端和前端体验有非常大的性能帮助。
信息流 - 滚动加载/手动点击加载
信息流即异步逐页渲染列表元素。
如页面初始时只显示了6个,想通过加载更多来显示余下列表,只需要执行下列方法即可。
参数说明:
| 参数 | 说明 |
| id | string,绑定挂载元素的id |
| type | 触发类型:scroll滚动到底部触发,click点击触发 |
| icon | 加载动画样式1-8,共8种样式 |
| text | 设置提示文字 |
| function | 触发事件后执行函数 |
实例:
//使用方法:可在当前页面html的js中使用下面的方法
// 信息流 - 手动点击加载
McrbHttpClient.loadfn.lazyload({
id:'lazy',
type:'click',
icon:2,
text:'LOADING...'
},function(){
console.log('您触发了click事件')
});// 信息流 - 滚动加载
McrbHttpClient.loadfn.lazyload({
id:'lazy',
type:'scroll',
icon:3,
text:'LOADING...'
},function(){
console.log('您触发了scroll事件')
});
效果展示:
加载中...
LOADING...
LOADING...
LOADING...
LOADING...
LOADING...
LOADING...
图片懒加载
该模块是一个用于加载当前屏图片的高性能方式,对网站因为图片可能带来的压力,可做出优化效果。(只会针对img元素有效)
参数说明:
| 参数 | 说明 |
| 第一个参数 | Array图片路径集合 |
| 第二个参数 | string,绑定挂载元素的id |
实例:
//使用方法:可在当前页面html的js中使用下面的方法
// 图片懒加载
var imgs = [
'http://5b0988e595225.cdn.sohucs.com/images/20181210/f3ecdb2198864d25bf05e54d7fc37ad7.jpeg',
'https://pic1.zhimg.com/v2-9efbeaa8877dcd5f04974a53ceba2878_r.jpg',
'http://5b0988e595225.cdn.sohucs.com/images/20181210/f3ecdb2198864d25bf05e54d7fc37ad7.jpeg',
'http://5b0988e595225.cdn.sohucs.com/images/20181210/f3ecdb2198864d25bf05e54d7fc37ad7.jpeg',
'http://5b0988e595225.cdn.sohucs.com/images/20181210/f3ecdb2198864d25bf05e54d7fc37ad7.jpeg',
'http://5b0988e595225.cdn.sohucs.com/images/20181210/f3ecdb2198864d25bf05e54d7fc37ad7.jpeg',
]
McrbHttpClient.loadfn.lazyimg(imgs,'container');
效果展示:




扫一扫