版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_38003892/article/details/80232169
1 需求背景
在我们做管理系统，需要从后台数据库取出数据显示到前台时，可能我们的做法就是将数据全部取出然后利用jQuery动态添加到表格当中，但是当我们取出的量非常大时问题就出现了，我们会发现页面加载的速度非常慢，这时我们就可利用分页或者这种监听滚动条来自动加载数据，这种技术也称为“懒加载”
2 实现过程中遇到的问题总结
（1）首先就是在滚动条滚动到底部之后，监听事件被多次触发。这个问题的解决方式就是通过设置一个标志，当滚动条滚动到底部并且标志为真时，启动加载数据事件，在进入动态加载数据时将标志设置为假，加载数据成功后，在设置为真。
（2）其次，这里ajax是异步加载数据的，我们发现虽然给我们自动加载数据了但是他并不是按照我们请求的顺序加载出来的，这是我们的解决方法就是将ajax改成同步，从而解决了这个问题。
3 部分代码实现
（1）前台html
<div id="infolist" data-spy="scroll" class="articlefoot table-responsive">
<table id="tabalelist" class="table text-nowrap">
<caption>文章列表</caption>
<thead>
<tr>
<th>编号</th>
<th>文章名称</th>
<th>类型</th>
<th>操作</th>
</tr>
</thead>
<tbody id="menu1body">
</tbody>
</table>
</div>（2）前台js
// 显示所有文章 先显示20 条 其余滑块滚动到底部 自动加载
// 1 从后台获取文章信息动态显示
$.get('/showallinfo/', function(data){
for(var i=0; i<data.length; i++){
$('#menu1body').append('<tr id="articleinfo'+data[i]['id']+'"><td>'+data[i]['id']+'</td><td style="max-width: 600px;overflow: hidden; text-overflow:ellipsis; white-space: nowrap;"><a href="/articleinfo/'+data[i]['id']+'/" target="_blank">'+data[i]['title']+'</a></td><td><select class="form-control"><option>'+data[i]['articleCategory']+'</option><option>NULL</option><option>数理科学</option><option>化学科学</option><option>生命科学</option><option>地球科学</option><option>工程与材料</option><option>信息科学</option><option>管理科学</option><option>医学科学</option><option>综合</option></select></td><td><button class="btn btn-default" onclick="window.open(\'/reviseinfo/'+data[i]['id']+'\')" style="color: green;">修改</button> <button class="btn btn-default delart" style="color: red;">删除</button> <button class="btn btn-default addkind" style="color: orange;">添加分类</button></td></tr>')
}
})// 滑块滚动到底部 自动加载20 条记录
var scrollnow = 2;//加载次数
var isbool=true;//标志
$("#infolist").scroll(function() {
var scrollTop = $(this).scrollTop();
var scrollHeight = $(this).height();
var windowHeight = $(".table").height();
if (scrollTop + scrollHeight >= windowHeight && isbool==true) {
// 此处是滚动条到底部时候触发的事件，在这里写要加载的数据，或者是拉动滚动条的操作
$.post('/scrolladd/',{scrollnow : scrollnow},function (data) {
scadd(data);
})
scrollnow++;
}
});
// 设置ajax同步
$.ajaxSettings.async = false;
//动态添加数据
function scadd(data) {
isbool=false;
for(var i=0; i<data.length; i++){
$('#menu1body').append('<tr id="articleinfo'+data[i]['id']+'"><td>'+data[i]['id']+'</td><td style="max-width: 600px;overflow: hidden; text-overflow:ellipsis; white-space: nowrap;"><a href="/articleinfo/'+data[i]['id']+'/" target="_blank">'+data[i]['title']+'</a></tdsyt><td><select class="form-control"><option>'+data[i]['articleCategory']+'</option><option>NULL</option><option>数理科学</option><option>化学科学</option><option>生命科学</option><option>地球科学</option><option>工程与材料</option><option>信息科学</option><option>管理科学</option><option>医学科学</option><option>综合</option></select></td><td><button class="btn btn-default" onclick="window.open(\'/reviseinfo/'+data[i]['id']+'\')" style="color: green;">修改</button> <button class="btn btn-default delart" style="color: red;">删除</button> <button class="btn btn-default addkind" style="color: orange;">添加分类</button></td></tr>')
isbool=true;
}
}（3）后台django代码
# 显示全部文章内容
def showallinfo(request):
articles = Article.objects.all()[0:20]
return HttpResponse(json.dumps(list(articles), default=lambda obj: obj.__dict__), content_type='application/json')
# 滑动到底部 自动加载20条
def scrolladd(request):
scrollnow = request.POST.get('scrollnow')
allnum = Article.objects.count()
if allnum < 20 * (int(scrollnow)):
artlist = Article.objects.all()[0 + 20 * (int(scrollnow) - 1):]
else:
artlist = Article.objects.all()[0 + 20 * (int(scrollnow) - 1):20 + 20 * (int(scrollnow) - 1)]
return HttpResponse(json.dumps(list(artlist), default=lambda obj: obj.__dict__), content_type='application/json')