github
/
layui
mirror of https://github.com/layui/layui
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
一套开源的 Web UI 组件库。采用自身极简的模块化规范，并遵循原生 HTML/CSS/JS 的开发模式，极易上手，开箱即用。非常适合网页界面的快速构建。
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1973 Commits
4 Branches
130 Tags
42 MiB
 
 
Tree: 868c945943
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '868c945943'
${ noResults }
layui/docs/flow/index.md

3.3 KiB
Raw Blame History

title toc
流加载 flow true

流加载

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

示例

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

API

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

信息流

flow.load(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>

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