滚动加载更多

weixin_33696106

于 2016-10-24 17:25:00 发布

阅读量101

点赞数

本文介绍了一种异步加载更多的实现方法，通过监听滚动事件自动加载新内容，提高用户体验。适用于无限滚动页面。

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

/**
 * 异步加载更多
 * create by tujia @2016.10.19
 */
function load_more(id,no_more){
    var _id         = id || 'lists';
    var _no_more     = no_more || '<li style="line-height: 4rem; text-align: center; font-size: 1rem; color: #717171;">没有更多啦</li>';

    var dH = 0,wH = 0,page_no = 1,can_loading = true;
    $(document).ready(function(){
        dH = $(document).height();
        wH = $(window).height();
    });
    $(window).scroll(function(){
        var offset_top = $(this).scrollTop();

        if(can_loading==true && (dH-offset_top-wH)<100){
            can_loading = false;
            $.get('', {'is_ajax':1, 'page_no':++page_no}, function(res){
                if(res!=''){
                    $('#'+_id).append(res);
                    dH         = $(document).height();
                    can_loading = true;
                }else{
                    $('#'+_id).append(_no_more);
                }
            }, 'html');
        }
    });
}