JQ自动加载函数: 分页加懒加载

最新推荐文章于 2022-01-22 07:00:00 发布

Jason Ho

最新推荐文章于 2022-01-22 07:00:00 发布

阅读量532

点赞数

分类专栏： Vue & Vuetify

本文链接：https://blog.csdn.net/weixin_42433970/article/details/106942601

版权

本文介绍如何利用JavaScript库JQuery实现分页和懒加载功能，提升网页性能。通过JS处理数据请求和内容显示，PHP作为后端处理分页逻辑，确保在用户滚动时动态加载更多内容。

摘要由CSDN通过智能技术生成

JS:

    var _page = 1, _words = '', _loadDone = false;
        //当滚动条即将到达底部自动加载数据
        $(window).scroll(function () {
   
            //下面这句主要是获取网页的总高度，主要是考虑兼容性所以把Ie支持的documentElement也写了，这个方法至少支持IE8
            var htmlHeight = $(document).height();
            //clientHeight是网页在浏览器中的可视高度，
            var clientHeight = $(window).height();
            //scrollTop滚动条到顶部的垂直高度
            var scrollTop = $(document).scrollTop();
            //通过判断滚动条的top位置与可视网页之和与整个网页的高度是否相等来决定是否加载内容；
            //
            // console.log(htmlHeight);
            // console.log(clientHeight);
            // console.log(scrollTop);
            var he = scrollTop + clientHeight;
            //当第一页数据加载完后再次滚动大于1px时,自动加载第二页,_page++,根据第一页加载几条数据决定高度
            if (scrollTop >= 600) {
   
                _loadList();
            }
        })
        _loadList();
        function _loadList()
        {
   
            if(_loadDone) return false;
            ajaxHidePost("{:U('vote_list')}", {
   page:_page,word:_words}, function(d){
   
                if(d.page <= 1 && d.list.length <= 0)
                {
   
                    _loadDone = true;
                    $('#itemBox').empty().append