layui/docs/flow/index.md

title, toc

title	toc
流加载 flow	true

流加载

流加载 flow 是用于在信息流和图片列表场景中的滚动按需加载，对前后端的体验和性能优化具有一定帮助。

示例

<style> .flow-demo{height: 400px; overflow: auto; font-size: 0;} .flow-demo li{display: inline-block; margin: 0 5px; font-size: 14px; width: 48%; margin-bottom: 10px; height: 100px; line-height: 100px; text-align: center; background-color: #eee;} .flow-demo img{width: 100%; height: 100%;} .flow-demo-lazyimg{height: 300px; overflow: auto; text-align: center;} .flow-demo-lazyimg img{width: 40%; height: 200px; margin: 0 3px 5px 0; border: none;} </style>

{{- d.include("/flow/detail/demo.md") }}

API

API	描述
var flow = layui.flow	获得 flow 模块。
flow.load(options)	信息流加载，核心方法。
flow.lazyimg(options)	图片懒加载。

信息流

flow.load(options);

• 参数 options : 基础属性配置项。#详见属性

信息流是分页的另一种表现形式，新加载的内容不替换原有的内容，而是随着滚动条滚动而追加显示。#详见示例

属性

{{- d.include("/flow/detail/options.md") }}

图片懒加载

flow.lazyimg(options);

• 参数 options : 属性配置项。可选项见下表。

属性名	描述
elem	绑定容器中需进行懒加载的图片元素选择器
scrollElem	滚动条所在元素选择器，默认 document 。

  <div class="flow-demo-lazyimg" id="ID-flow-demo-lazyimg">
  <!-- <img src="占位图地址" lay-src="图片实际地址"> -->
  <img lay-src="https://unpkg.com/outeres@0.0.11/demo/wallpaper.jpg">
  <img lay-src="https://unpkg.com/outeres@0.0.11/demo/wallpaper.jpg">
  <img lay-src="https://unpkg.com/outeres@0.0.11/demo/wallpaper.jpg">
  <img lay-src="https://unpkg.com/outeres@0.0.11/demo/wallpaper.jpg">
  <img lay-src="https://unpkg.com/outeres@0.0.11/demo/wallpaper.jpg">
  <img lay-src="https://unpkg.com/outeres@0.0.11/demo/wallpaper.jpg">
  <img lay-src="https://unpkg.com/outeres@0.0.11/demo/wallpaper.jpg">
  <img lay-src="https://unpkg.com/outeres@0.0.11/demo/wallpaper.jpg">
  <img lay-src="https://unpkg.com/outeres@0.0.11/demo/wallpaper.jpg">
  <img lay-src="https://unpkg.com/outeres@0.0.11/demo/wallpaper.jpg">
  <img lay-src="https://unpkg.com/outeres@0.0.11/demo/wallpaper.jpg">
  <img lay-src="https://unpkg.com/outeres@0.0.11/demo/wallpaper.jpg">
  <img lay-src="https://unpkg.com/outeres@0.0.11/demo/wallpaper.jpg">
  <img lay-src="https://unpkg.com/outeres@0.0.11/demo/wallpaper.jpg">
</div>

<!-- import layui --> 
<script>
layui.use('flow', function(){
  var flow = layui.flow;
  // 图片懒加载
  flow.lazyimg({
    elem: '#ID-flow-demo-lazyimg img',
    scrollElem: '#ID-flow-demo-lazyimg' // 一般不用设置，此处只是演示需要。
  });
});
</script>
  

无论滚动条上滑还是下滑，都会始终加载当前屏的图片。