layui源码详细分析系列之流加载模块

前言

所谓的流加载实际上是第一种优化手段，通常用于图片丰富的网站，目的是为了提供更好的用户体验。

具体的体现是在页面初始化时，先加载一小部分内容，当用户下拉页面到一定的距离，开始加载另一小部分的内容，直至将所有资源加载呈现，体现的是化整为零的思想，具有较好地用户体现效果。

自实现流加载以及图片懒加载功能

流加载功能和图片懒加载功能是分开实现的，使用原生的JavaScript开发（所有涉及交互效果的案例等都是使用JavaScript来实现，基础才是王道）现在先说说流加载功能，具体的实现效果图如下：

上面的是自动带图标加载形式的，还有事按钮形式的加载形式，具体效果图如下：

下面说说具体的实现思路，实际上就是监听指定元素的scroll事件，当滚动条滚动时需要做的事情：

1. 判断是否滚动到底部，判断条件是(假设elem就是外部容器节点), elem.clientHeight+ elem.scrollTop === elem.scrollHeight（容器可是区域的高度 + 滚动条距离顶部的距离 === 容器的滚动高度）
2. 当到达条件时就创建加载区域的节点并追加到容器中，当加载成功后，首先删除加载节点，将元素节点都追加到容器中
3. 判断资源是否完全加载，完全加载就显示没有多余的资源

在上面实现思路需要考虑的问题：

• 滚动条向上滚动带来的重复性问题

我的解决是维持一个状态数组，记录任何时刻前一次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);
                            }
                        }
                    }
                }
            });

代码主要组织结构图如下：

下面说说layui中流加载模块的实现，该内置模块使用JQuery来实现，对于流加载以及图片懒加载实现思想，我上面的实现思路跟它的相似，核心代码还是有所区别，下面主要说说区别点：

• layui内置流加载模块，考虑到容器元素是全局的情况处理, 作者考虑的很全面
• 内置模块对外提供api支持用于自实现具体的容器元素
• layui该内置模块实现在操作的过程中更加流畅自然

该内置模块代码组织结构图如下：

该模块组织非常简洁明了，load是用于处理流加载，lazyimg是处理图片懒加载的。

layui框架内置模块flow.js的详细代码注释以及我自己实现的demo的源代码会上传到我的Github上，与君共进步。

致远行的你我