Mikel
来源： layui源码详细分析系列之流加载模块_玉案轩窗的博客-CSDN博客_layui 流加载
前言
所谓的流加载实际上是第一种优化手段，通常用于图片丰富的网站，目的是为了提供更好的用户体验。
具体的体现是在页面初始化时，先加载一小部分内容，当用户下拉页面到一定的距离，开始加载另一小部分的内容，直至将所有资源加载呈现，体现的是化整为零的思想，具有较好地用户体现效果。
自实现流加载以及图片懒加载功能
流加载功能和图片懒加载功能是分开实现的，使用原生的JavaScript开发（所有涉及交互效果的案例等都是使用JavaScript来实现，基础才是王道）现在先说说流加载功能，具体的实现效果图如下：
上面的是自动带图标加载形式的，还有事按钮形式的加载形式，具体效果图如下：
下面说说具体的实现思路，实际上就是监听指定元素的scroll事件，当滚动条滚动时需要做的事情：
判断是否滚动到底部，判断条件是(假设elem就是外部容器节点), elem.clientHeight+ elem.scrollTop === elem.scrollHeight（容器可是区域的高度 + 滚动条距离顶部的距离 === 容器的滚动高度）
当到达条件时就创建加载区域的节点并追加到容器中，当加载成功后，首先删除加载节点，将元素节点都追加到容器中
判断资源是否完全加载，完全加载就显示没有多余的资源
在上面实现思路需要考虑的问题：
滚动条向上滚动带来的重复性问题
我的解决是维持一个状态数组，记录任何时刻前一次scroll触发时的scrollTop，与当前scrollTop比较，只有当前scrollTop大于保存的状态值，才进行相应的程序处理。
流加载中最主要的是判断滚动条是否滚动条底部，从而执行程序处理。
图片懒加载：
所谓的图片懒加载就是页面初始化时不加载所有图片，当用户滚动到可视区域（就是图片需要显示的区域时），加载当前可视区域内的图片，具体的实现效果如下：
由于上传图片有大小限制，可能拉滚动条有点快，不过效果还是可以看到的。
实现的关键点：
判断图片是否在当前可是区域内
实现思路：
所有的img标签的src属性都是空或没有src属性，初始化时显示当前区域的图片，判断的条件（假设图片节点是image, 容器节点elem）：image.offsetTop < elem.clientHeight
elem容器节点绑定scroll事件，同时也要处理向上滚动带来的问题
设置需要显示图片的可视区域，判断当前图片是否在可视区域从而是否需要显示，代码如下：
// record = [0], data是图片src的数据源
elem.addEventListener(‘scroll’, function() {
let scrollTop = this.scrollTop,
scrollHeight = this.scrollHeight,
clientHeight = elem.clientHeight;
// 处理向上滚动的重复性问题
if (scrollTop > record[0]) {
record.shift();
record.push(scrollTop);
}
// 只有向下滚动才执行相关程序
if (scrollTop >= record[0]) {
for (let index = 0; index < images.length; index++) {
let image = images[index],
offsetTop = image.offsetTop,
start = scrollTop,
end = start + clientHeight;
// 核心代码，图片显示的可视区域: scrollTop ~ scollTop + clientHeight
if (offsetTop >= start && offsetTop <= end) {
if (!image.src) {
setTimeout(function() {
image.src = data[index];
}, 300);
}
}
}
}
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
代码主要组织结构图如下：
下面说说layui中流加载模块的实现，该内置模块使用JQuery来实现，对于流加载以及图片懒加载实现思想，我上面的实现思路跟它的相似，核心代码还是有所区别，下面主要说说区别点：
layui内置流加载模块，考虑到容器元素是全局的情况处理, 作者考虑的很全面
内置模块对外提供api支持用于自实现具体的容器元素
layui该内置模块实现在操作的过程中更加流畅自然
该内置模块代码组织结构图如下：
该模块组织非常简洁明了，load是用于处理流加载，lazyimg是处理图片懒加载的。
layui框架内置模块flow.js的详细代码注释以及我自己实现的demo的源代码会上传到我的Github上，与君共进步。
————————————————
版权声明：本文为CSDN博主「玉案轩窗」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/s1879046/article/details/76856015
