用jQuery写的按需加载代码

最新推荐文章于 2022-04-16 12:39:07 发布

原创最新推荐文章于 2022-04-16 12:39:07 发布 · 置顶 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#ajax

javascript 专栏收录该内容

7 篇文章

订阅专栏

本文详细解析了Ajax按需加载的工作原理，通过监听滚动事件，在页面底部加载更多数据，实现平滑的用户体验。使用jQuery简化操作，展示具体代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先我来讲解一下基本原理,

1.ajax按需加载原理是和分页的原理是一样的,我们只需要给后台传入页数以及每页显示的条数即可,前台的操作由前台完成,
2,就是前台,当我们的滚动条滑动到底部的时候自动加载接下来的数据,所以就需要使用窗口滚动事件,
我这里主要讲的是jQuery的代码,原生态的代码可能要多一点,但原理都是一样的
$(window).scrollTop() ;滚动条滚动的高度
$(document).height() : 当前文本的高度,
$(window).height() : 浏览器窗口的高度,即我们能看到的浏览器高度(视窗区域)
在这里我放一张图,可能更好理解一点: 在这里插入图片描述

var page = 0; //传入的页数
var limit = 30; //每页显示的条数
$(window).scroll(function(){ //窗口滚动时间
//当滚动条的距离 = 文本的高度 - 浏览器窗口的高度,也就是滚动条滚动到底部的时候;,此时进行判断,并用ajax异步加载数据,并返回给前台显示;
if( $(window).scrollTop() == $(document).height() - $(window).height() ){
page ++;
$.ajax({
type:‘post’,
url:’{:url(“index/index/getImgJson”)}’,
data:{‘page’:page,‘limit’:limit},
async: true,//同步
success:function(data){
var oJson = JSON.parse(data); //将后台传过来的数据(data),转换为json
var str = ‘’;
//循环遍历数据,并放在HTML标签里,用jQuery添加到DOM对象里面去.
for(var index = 0;index < oJson.length-1;index ++){
str +="

<a href=“UPLOAD”+oJson[index].p_photo+"" data-lightbox=“01”><img src=“UPLOAD”+oJson[index].p_photo+"" width=“150px;”/>
";
}
if( str == ‘’ ){
$(".bottom").html(‘
已经到底部了
’);
}else{
$(".photo-list").append(str);
}
},
});
}
});

此时,我们ajax按需加载就完成了.