流加载

该模块包含信息流加载和图片懒加载两大核心组成,其对服务端和前端体验有非常大的性能帮助。

信息流 - 滚动加载/手动点击加载

信息流即异步逐页渲染列表元素。

如页面初始时只显示了6个,想通过加载更多来显示余下列表,只需要执行下列方法即可。

参数说明:

参数说明
idstring,绑定挂载元素的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...

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

效果展示:

本文档来自—microbee-http 丨 软件开发框架平台