前言
最近呢,有点忙。但是每天都有记录,怎么说呢,每天都有收获。看我的发布时间就可以知道,基本一天发布好几个。对……我就是在一周中花一天时间来整理,一周所掌握的知识点和记录。好,那么我们就进入正题了!
这几天和技术总监有聊到流式加载和懒加载的问题。大家都知道,当数据量特别大的时候,为了不影响页面的加载速度问题。一般是采用分页方式。有用到分页方式的话,就会有上一页,下一页的按钮。当第一批数据浏览完之后,想看后面的数据的话,就点击下一页按钮就好了,但是看完第二页之后,想看第二页的话,又得点上一页按钮了……还别说,懒人呢还是有的。为了提高用户的体验感,怎么方便怎么来,那么流式加载他就来了。
只要鼠标一直下滑,第一批数据显示完了之后,第二批数据显示出来……一直类推直到数据显示完。不得不说,是很方便的,一直滑,一直滑,倒有点像是刷快手,和抖音似的哈哈。
思路
去琢磨了一下,实现起来好像并不是很难。现成的组件,框架网上百度一大堆。但是呢我可不想成为一个 CV战士程序员。里面的原理还是值得去学习。大概整理了一下,其实不难。所以做了一个简单的示例。
(一)标签每一行所显示的高度
(二)监听滚动条的监听事件
(三)设定一个值,用于判断是否符合条件然后加载下一批数据
实现效果
在Web页面中流式加载图片或数据
主要Js代码
<script>
$(function () {
$(".container").scroll(function () {//开始监听滚动条
scrollLoad.scrollChack();
});
var scrollLoad={
//模拟数据
photo_arr:["/images/i1.png","/images/i2.png","/images/i3.png","/images/i4.png"],
//滚动检查,滚动条的高度,是否符合条件
scrollChack:()=>{
//获取当前所有行中最后一行的eq索引
var $treqIndex=$("#tableScroll tr").length-1;
//获取当前所有行中最后一行的offsetTop坐标
var curr_top =$("#tableScroll tr").eq($treqIndex).offset().top;
//用于记录当前offsetTOP 【大家可以在web页面上将滚动条滑到底,根据这个值判断,取多少值合适】
$("#curToptips").text(curr_top);
//一列照片的height是180px ,初始行有4行,180*2=360px;+<h1>滚动条加载</h1>标签的高度大约477.5px
//也就是当,当前高度小于385的时候就是到底了,那么这个时候就可以加载下一批图片了
if(curr_top<478)
{
//生成正在“加载中……”的提示标签
scrollLoad.GenLoadGIFtr();
//设置时间2.5s后生成下一批数据
setTimeout(scrollLoad.GentrAndtd,2500);
}
}
,
//生成正在“加载中……”的提示标签,并给他一个id标识,用于生成下一批数据之后清除它
GenLoadGIFtr:()=>{
let html='<tr id="load_gif"> <td colspan="6"><img class="Load-img" src="/images/Load1.gif"/><i>正在加载中……</i></td></tr>';
$("#tableScroll").append(html);
}
,
//生成下一批数据图片
GentrAndtd:()=>{
let html = "<tr>";
for (let i = 0; i < scrollLoad.photo_arr.length; i++) {
for (let j = 0; j < 6; j++) {
html += ' <td><img src="' + scrollLoad.photo_arr[i] + '" /></td>';
}
html += "</tr>";
}
//删除加载中,标签
$("#load_gif").remove();
$("#tableScroll").append(html);
}
}
})
</script>
当然,如果大家要想做个示例的,并且不嫌弃我代码的话,可以就用我这个来试一试吧!我把css,html代码帖出来
css 样式
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>流式加载</title>
<style>
.container{
width: 50%;
position: absolute;
margin-left: -25%;
left: 50%;
height: 580px;
overflow-y: scroll;
background: rgb(240,240,240);
}
table{
width: 100%;
}
table td img{
width: 100px;height: 180px;
}
.Load-img{
margin-left: 40%;
margin-right: 30px;
display: inline-block;width: 20px;height: 20px;
}
table td i{
font-weight: 700;
font-size: 20px;
display:inline-block ;
}
</style>
<script src="/Jqmin.js"></script>
</head>
body 标签元素
<body>
<h1>当前offset:<span id="curToptips"></span></h1>
<div class="container"> <h1>滚动加载</h1>
<table id="tableScroll">
<tr>
<td><img src="/images/i1.png" /></td>
<td><img src="/images/i1.png" /></td>
<td><img src="/images/i1.png" /></td>
<td><img src="/images/i1.png" /></td>
<td><img src="/images/i1.png" /></td>
<td><img src="/images/i1.png" /></td>
</tr>
<tr>
<td><img src="/images/i2.png" /></td>
<td><img src="/images/i2.png" /></td>
<td><img src="/images/i2.png" /></td>
<td><img src="/images/i2.png" /></td>
<td><img src="/images/i2.png" /></td>
<td><img src="/images/i2.png" /></td>
</tr>
<tr>
<td><img src="/images/i3.png" /></td>
<td><img src="/images/i3.png" /></td>
<td><img src="/images/i3.png" /></td>
<td><img src="/images/i3.png" /></td>
<td><img src="/images/i3.png" /></td>
<td><img src="/images/i3.png" /></td>
</tr>
<tr>
<td><img src="/images/i4.png" /></td>
<td><img src="/images/i4.png" /></td>
<td><img src="/images/i4.png" /></td>
<td><img src="/images/i4.png" /></td>
<td><img src="/images/i4.png" /></td>
<td><img src="/images/i4.png" /></td>
</tr>
</table>
</div>
</body>
好了,基本就是这样了,其实也不难。当然这只是一个示例,比如要想弄一个 加载更多的按钮放在在下面的,其实原理都是一样的,只是触发的条件更改了而已。
那如果要和后端结合的话,原理也是一样的。也相当于是一个分页的功能。设定一个公共变量的值为1,然后每次滑动到了一定的高度,再累加这个变量;用这个变量向服务器去要数据,然后再异步追加就好了。所以不管怎么去变,只要原理知道了,去举一反三就简单的多了。