大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
该模块包含 信息流加载 和 图片懒加载 两大核心支持,无论是对服务端、还是前端体验,都有非常大的性能帮助。下边分别给出了这两种技术的使用方法:
公司2013年成立创新互联专注于”帮助中小企业+互联网”, 也是目前成都地区具有实力的互联网服务商。团队致力于为企业提供--站式网站建设、移动端应用( H5手机营销、重庆APP软件开发、微信开发)、软件开发、信息化解决方案等服务。
一、信息流加载
信息流加载的核心方法时 flow.load(options) ,下边给了一个模拟加载新闻列表的栗子
前端html和js
后台服务器代码
public class HomeController : Controller { // GET: Home public ActionResult Index() { return View(); } public ActionResult GetList(int page) { //简单数据库中新闻 ListnewsList = 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 }) });
以上就是layui框架的flow组件常见用法总结的详细内容,更多请关注创新互联其它相关文章!