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

Dear 丶 2023-02-20 07:08 18阅读 0赞

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('<div style="color:#a7a7a7;text-align:center; font-size:0.7rem">暂无数据</div>');
                    }else{ 
                        var _html = '', _errImg = '__HOME__/icon_nopic.png';
                        $.each(d.list,function(i,v){ 
                        _html += ' <div class="user user-pic">\n' +
                            ' <span class="number" style="background:#ff6a6a">'+v.id+'</span>\n' +
                            ' <a href="/home/Member/vote_detail&id='+v.id+'">\n' +
                            ' <img class="lazy" data-original="'+v.img+'" alt="士大夫" src="'+v.img+'" style="display: inline-block;">\n' +
                            ' </a>\n' +
                            ' <div class="info">\n' +
                            ' <p class="username iconfont icon-user">'+v.name+'</p>\n' +
                            ' <p class="coupons iconfont icon-upper">\n' +
                            ' <span class="piao">'+v.vote_total+'</span>票\n' +
                            ' </p>\n' +
                            ' </div>\n' +
                            ' <button rel="{$member_id}" vote_num="'+v.vote_id+'" class="vote-btn dotoupiao" style="background:#ff6a6a" code="'+v.id+'" nickname="'+v.name+'">投票</button>\n' +
                            ' </div>\n';
    
                        });
                        if(_page <= 1) $('#itemBox').empty();
                        $('#itemBox').append(_html);
                        _loadDone = d.done == '1' ? true : false;
                        if(!_loadDone) _page++;
                    }
                });
            }
            var _pubAjax = false;
            function ajaxHidePost(url, param, callback)
            { 
                if(_pubAjax) return false;
                _pubAjax = true;
                $.ajax({ 
                    type: "post",
                    url: url,
                    data: param,
                    dataType: "json",
                    success: callback,
                    error: function() {  _pubAjax = false;},
                    complete: function() {  _pubAjax = false;},
                });
            }

PHP:

public function vote_list()
        { 
            $vote_id = 1;
            $page = intval($_POST['page']) > 0 ? intval($_POST['page']) : 1;
            $keyword = trim($_POST['word']) ? : '';
            $limit = 6;
    
    
            if($keyword){ 
                $count = D('VoteItem')->where(['name'=>['like','%'.$keyword.'%']])->where(['vote_id'=>$vote_id])->count();
                $totalPage = ceil($count / $limit);
            }else{ 
                $count = D('VoteItem')->where(['vote_id'=>$vote_id])->count();
                $totalPage = ceil($count / $limit);
            }
    
            $list = D('VoteItem');
            if($keyword){ 
                $list = $list->where(['name'=>['like','%'.$keyword.'%']]);
            }
            $list = $list
                        ->page($page, $limit)
                        ->where(['vote_id'=>$vote_id])
                        ->order('id asc')
                        ->select();
    
            $list_all = [];
            foreach ($list as $i => $node){ 
                $total_record = D('VoteRecord')
                    ->group('vote_item_id')
                    ->where(['vote_item_id'=>$node['id']])
                    ->count();
                $list_all[$i] = $node;
                if($total_record){ 
                    $list_all[$i]['vote_total'] = $total_record;
                }else{ 
                    $list_all[$i]['vote_total'] = 0;
                }
    
            }
    
    // dump($list_all);exit;
            $this->ajaxReturn([
                'done' => $page >= $totalPage ? '1' : '0',
                'page' => $page,
                'list' => !count($list) ? '' : $list_all,
            ]);
        }

发表评论取消回复

表情：

评论列表（有 0 条评论，18人围观）

还没有评论，来说两句吧...

相关阅读

相关懒加载

<script type="text/javascript"> // 懒加载 // getBoundCl

向右看齐/ 2023年08月17日 15:55/ 0 赞/ 180 阅读

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

JS: var _page = 1, _words = '', _loadDone = false; //当滚动条即将到达底部自动加载数据

Dear 丶/ 2023年02月20日 07:08/ 0 赞/ 19 阅读

相关懒加载

为什么要使用懒加载？当我们进入到某个页面的时候，会有很多的图片，有些图片可能在下面，当我们点进页面但没有滑动全部展示时，其实下面的图片是没有啥作用的，白加载了，还降低网

青旅半醒/ 2022年12月13日 00:44/ 0 赞/ 321 阅读

相关懒加载(Lazy Loading) - MyBatis懒加载 - Spring懒加载

文章目录懒加载(Lazy Loading) MyBatis中懒加载的使用 Spring中懒加载的使用懒加载(

Dear 丶/ 2022年12月10日 15:53/ 0 赞/ 425 阅读

相关懒加载

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8">

快来打我*/ 2022年05月28日 05:35/ 0 赞/ 425 阅读

相关 JQ图片懒加载

废话不多说，直接上代码。预览地址：[http://www.bright2017.top/test1/test1-18/][http_www.bright2017.top_t

偏执的太偏执、/ 2022年05月22日 09:53/ 0 赞/ 167 阅读

相关懒加载，预加载

-------------------- 一.懒加载 > 1.what: > > 延迟加载，一种很好的优化网页性能方式。可视区域外的东西不会加载，减少服务器的负载

骑猪看日落/ 2022年05月14日 10:14/ 0 赞/ 422 阅读

相关 jQuery延迟加载（懒加载）

简介延迟加载（lazy load）又可称之为懒加载，他是为了避免一些无谓的性能开销而提出来的。所谓延迟加载，就是当真正需要数据的时候，才真正执行数据加载操作。可简单理解为

喜欢ヅ旅行/ 2022年05月09日 16:28/ 0 赞/ 982 阅读

相关懒加载

懒加载 <template> <view> <scroll-view :scroll-into-view="'ss' + curr

亦凉/ 2021年07月25日 12:19/ 0 赞/ 779 阅读