该模块包含 信息流加载 和 图片懒加载 两大核心支持,无论是对服务端、还是前端体验,都有非常大的性能帮助。下边分别给出了这两种技术的使用方法
信息流加载的核心方法时 flow.load(options) ,下边给了一个模拟加载新闻列表的栗子
前端html和js
后台服务器代码
public class HomeController : Controller{// GET: Homepublic 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})
});
注:这是为了个人查找方便整理的文档,并没有总结完全,查看更多可访问官网http://www.layui.com/doc