Preface
Recently, I am a bit busy. But every day there is a record, how can I say, every day there is a harvest. You can tell by looking at my release time, basically several releases a day. Yes... I just spend one day of the week sorting out the knowledge points and records that I have mastered in a week. OK, then we are on the subject!
In the past few days, I have talked to the technical director about streaming loading and lazy loading. Everyone knows that when the amount of data is particularly large, in order not to affect the loading speed of the page. Generally, paging is used. If you use the paging method, there will be buttons for the previous page and the next page. After browsing the first batch of data, if you want to see the following data, just click the next page button, but after reading the second page, if you want to see the second page, you have to click the previous page button again... Not to mention, there are still lazy people. In order to improve the user's sense of experience, how easy it is to come, then streaming loading is here.
As long as the mouse keeps sliding down, after the first batch of data is displayed, the second batch of data is displayed...and so on until the data is displayed. I have to say that it is very convenient, always sliding, always sliding, it is a bit like swiping fast , and vibrato- like haha.
Ideas
After thinking about it, it doesn't seem to be difficult to realize it. There are a lot of ready-made components and frameworks on Baidu online. But I don't want to be a CV warrior programmer. The principles inside are still worth learning. I probably sorted it out, but it's not difficult. So made a simple example.
(1) The height displayed on each line of the label
(2) Listen to the monitoring event of the scroll bar
(3) Set a value to determine whether the conditions are met and then load the next batch of data
Achieve effect
Streaming images or data in web pages
Main Js code
<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>
Of course, if you want to be an example, and don't dislike my code, you can use me to give it a try! I post css, html code
css style
<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 tag element
<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>
Well, that's basically it, but it's not difficult. Of course, this is just an example. For example, if you want to put a button to load more underneath, the principle is the same, but the trigger condition is changed.
If it is to be combined with the back end, the principle is the same. It is also equivalent to a paging function. Set the value of a public variable to 1, and then add this variable every time it slides to a certain height; use this variable to ask the server for data, and then append it asynchronously. So no matter how you change it, as long as the principle is known, it is much easier to draw inferences from one another.