当前位置: 首页 / 网站建设 / 正文

网页拉到底部自动加载怎么实现的?jquery无限加载技术分享

发布时间:2020-04-25 21:01:44 作者:小超越君

你也许常常逛各种网页会发现,有的网页需要手动翻页,有的网站却会自动帮你加载,体验上,后者高效不少,只要你内容多,即可无限加载,那么,作为一个程序员,你一定会好奇这种技术是怎么样实现的?

别急,今天就让小超越工作室为你慢慢讲解一下。这里涉及到几个知识点,可别忘了拿好小本本记下来哦。

如果用原生javascript太过于复杂,我们今天就用jquery来实现吧!

网页拉到底部自动加载怎么实现的?jquery无限加载技术分享

用到的jquery技术方法

$.ajax() //异步加载接口数据
$(document).scroll(function(){}) //监控拉下滚动条事件
$(document).scrollTop() //获取滚动条的高度
$(window).height() //获取可见的窗口高度
$(‘#id’).append(html) //在元素后面添加html代码

无限下拉实现思路

1、首先,我们需要实现无限拉下加载数据,那么我们就一定要有一个接口返回要加载的数据,所以这个要提前做好。

2、获取需要下拉加载元素的高度、

3、获取可见窗口的高度

4、获取当前滚动条的高度

5、根据可见窗口高度+当前滚动条高度,如果大于或等于元素的高度,那么就可以判断用户已经下拉到底部了,这时,就要利用ajax异步请求接口来获取数据,并且在当前元素后面添加上相应的内容即可。

6、但是因为,接口请求数据有延时,我们还需要设计一个动态加载的开关。如果加载成功才把开关打开,避免重复请求数据,造成无法预计的后果。

无限下拉加载数据演示代码实例

小超越工作室一向都是崇尚简洁,直接上代码,如果需要直接复粘贴即可实现你要的效果,不过,你还是要根据你的html结构来修改一下。

html部分

1
<div id="goodslist"></div>

js代码部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
page = 1;
isloding = false
       
        $(document).on('scroll', function () {
            var listheight = $("#goodslist").height();
            var listscrollheight = $(document).scrollTop()
            var winheight = $(window).height();
            if (listscrollheight + winheight >= listheight && isloding == false) {
                console.log("到底啦!")
                isloding = true
                lod()
            }
        })
        function lod() {
            var url='/index.php/index/so_api/?title='+key+'&page='+page
            $.ajax({
                url: url, success: function (res) {
                    console.log(res)
                    html=res.data;
                    page=res.min_id;
                    $('#goodslist').append(html)
                    isloding = false
                }
            });
           
        }

好了,网页拉到底部自动加载怎么实现的?jquery无限加载技术分享,就到这里完了,如果你还是不懂得,就来问小超越吧。不过,问问题前,最好先红包开路哦!

文章允许转载,请保留本文链接:https://www.zhe94.com/705.html

小超越
热爱折腾,曾想着改变世界,如今只能向生活低头,寻找可口的牛奶和面包
添加站长微信作者头像
专注高品质湛江网站建设及湛江SEO优化服务 立即咨询