jQuery & JavaScript 实现上滑加载更多

ITPOW2017/1/20 23:18:28

下载全部文件

在线查看 JS 代码

<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
function bottomScrollLoading(contentObj, loadingObj, url) {
    var loading = false;
    
    $(window).scroll(function (){
        if (loading)
        {
            return; // 已经在加载中了，再拖也没有用
        }
        
        var scrollTop = $(window).scrollTop();
        var clientHeight = $(window).height();
        // var clientHeight = document.body.clientHeight; // 如果没有为网页指定 DOCTYPE，则用这句代替上一句
        if (scrollTop + clientHeight < $(document).height()){
            return; // 还没有拖到底
        }
        
        loading = true;
        $(loadingObj).show(); // 显示“加载中”
        $(window).scrollTop(scrollTop + $(loadingObj).height()); // 继续滚动，让“加载中”显示完整
        // ajax 读取
        $.ajax({
            url: url,
            success: function (data){
                // setTimeout(function (){
                    $(contentObj).append(data);
                // }, 5000); // 为了效果明显，作了延迟，调试用。
            },
            complete : function (){
                // setTimeout(function (){
                    $(loadingObj).hide();
                    $(window).scrollTop(scrollTop); // 由于前面为了显示“加载中”让网页下滚了，这里要复原，否则如果遇到加载的内容高度 < “加载中”高度，就会导致又触发滚动加载。
                    loading = false;
                // }, 5000); // 为了效果明显，作了延迟，调试用。
            }
        });
    });
}


$(window).ready(function (){
    bottomScrollLoading("#list", "#bottomLoading", "data.htm");
});
</script>

如果要做成拉到底还可以多拉一点点，此时提示“继续上滑，加载更多”，然后再继续上滑，才加载更多，这就更复杂了。

请继续阅读升级版。