layui源码详细分析系列之流加载模块_玉案轩窗的博客-CSDN博客_layui 流加载

baacloud免费翻墙vpn注册使用

来源: 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

赞(0) 打赏
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏