img layui 流_layui框架学习之flow组件常见用法总结

layui框架的flow组件包含“信息流加载”和“图片懒加载”两大核心支持，无论是对服务端、还是前端体验，都有非常大的性能帮助。本教程分别给出了这两种技术的使用方法，希望对大家有一定的帮助。

该模块包含 信息流加载 和 图片懒加载 两大核心支持，无论是对服务端、还是前端体验，都有非常大的性能帮助。下边分别给出了这两种技术的使用方法：

一、信息流加载

信息流加载的核心方法时 flow.load(options) ，下边给了一个模拟加载新闻列表的栗子

前端html和js

ul li {

height: 200px;

border: 5px solid green;

font-size: 50px;

line-height: 200px;

text-align: center;

}

layui.use('flow', function () {

var $ = layui.jquery; //不用额外加载jQuery，flow模块本身是有依赖jQuery的，直接用即可。

var flow = layui.flow;

flow.load({

elem: '#newsList' //指定列表容器

, isAuto: false //到底页面底端自动加载下一页，设为false则点击'加载更多'才会加载

//, mb: 100 //距离底端多少像素触发auto加载

, isLazying: true //当单个li很长时，内部有很多图片，对图片进行懒加载，默认false。

, end: '

木有了

' //加载所有后显示文本，默认'没有更多了'

, done: function (page, next) { //到达临界，触发下一页

var lis = [];

$.get('/Home/GetList?page=' + page, function (res) {

//假设你的列表返回在data集合中

layui.each(res.data, function (index, item) {

lis.push('

' + item + '');

});

next(lis.join(''), page < res.pages);//pages是后台返回的总页数

});

}

});

});

后台服务器代码public class HomeController : Controller

{

// GET: Home

public ActionResult Index()

{

return View();

}

public ActionResult GetList(int page)

{

//简单数据库中新闻

List newsList = new List();

for (int i = 0; i < 55; i++)

{

newsList.Add("新闻" + i);

}

//总页数

int pages =(int) Math.Ceiling((double)55 / 10);

//模拟分页

var data= newsList.Skip((page - 1) * 10).Take(10);

return Json(new { data,pages},JsonRequestBehavior.AllowGet);

}

}

二、图片懒加载

layui中的图片懒加载十分简单，将图片的src属性替换为lay-src，然后调用 flow.lazyimg() 方法即可layui.use('flow', function(){

var flow = layui.flow;

//当你执行这样一个方法时，即对页面中的全部带有lay-src的img元素开启了懒加载

flow.lazyimg(); //方式一，全部懒加载

flow.lazyimg({ //方式二，特定容器懒加载

elem:'#box1' //不设置elem，对页面中所有图片进行懒加载

，scrollElem:document

})

});

更多前端开发知识，请查阅 HTML中文网 ！！