模仿京东首页DIV懒加载,根据滚动条来加载div

本文介绍了如何实现DIV懒加载技术,通过AJAX请求在用户滚动到页面底部时加载更多内容,提高网页加载速度。利用JavaScript监听滚动事件,结合后台Controller处理分页请求,达到数据分段加载的效果,提升用户体验。
摘要由CSDN通过智能技术生成

原理是先将需要展示内容的div单独提取出来,放到一个新的页面,在需要展示的时候,直接通过AJAX请求页面,然后展示,实现DIV懒加载,在数据多的时候可以将数据分成很多段,用户滚动到需要展示的位置在加载,大大提高打开网页的速度。

效果图:

1.在没有拉到底部的时候显示一个gif加上提示语

2.在滚动条拉到底部的时候,加载下一页内容

HTML:

 <div id="tiezi">

//假如有一百条数据,这里在用户打开页面的时候展示前10条

</div>

 <div id="result">
        @using (Ajax.BeginForm("TieziFenYe", "Original", new AjaxOptions()
        {
            HttpMethod = "POST",
            InsertionMode = InsertionMode.InsertAfter,//这里是指把得到的结果更新在id为tiezi的div后面
            UpdateTargetId = "tiezi",
        }))

{

//pagenum:所有数据可以分多少页(按一页10条数据分)

//ViewBag.num:从后台获取所有数据的个数

int pagenum = ViewBag.num % 10;

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值