jQuery & JavaScript 实现上滑加载更多升级版

ITPOW2017/2/22 17:13:20
之前介绍过上滑加载更多，但是使用中常常遇到两个问题：
一是 URL 会变，比如需要传入参数已经加载到多少条了，这个参数就会变。
二是如果没有更多数据了，最好作提示。
所以，作了点升级：
先提供一个 Loading 图标，如下：
再提供代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Language" content="zh-cn" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
<style type="text/css">
.item { margin-bottom:10px; padding-bottom:10px; border-bottom:1px solid #ccc; height:100px; line-height:100px; }
#bottomLoading { display:none; text-align:center; }
</style>
</head>

<body>

<div id="list">
	<div class="item">1 <a href="http://www.itpow.com/" target="_blank">www.itpow.com</a></div>
	<div class="item">2 <a href="http://www.itpow.com/" target="_blank">www.itpow.com</a></div>
	<div class="item">3 <a href="http://www.itpow.com/" target="_blank">www.itpow.com</a></div>
	<div class="item">4 <a href="http://www.itpow.com/" target="_blank">www.itpow.com</a></div>
	<div class="item">4 <a href="http://www.itpow.com/" target="_blank">www.itpow.com</a></div>
	<div class="item">5 <a href="http://www.itpow.com/" target="_blank">www.itpow.com</a></div>
	<div class="item">6 <a href="http://www.itpow.com/" target="_blank">www.itpow.com</a></div>
	<div class="item">7 <a href="http://www.itpow.com/" target="_blank">www.itpow.com</a></div>
	<div class="item">8 <a href="http://www.itpow.com/" target="_blank">www.itpow.com</a></div>
	<div class="item">9 <a href="http://www.itpow.com/" target="_blank">www.itpow.com</a></div>
</div>
<div id="bottomLoading"><img src="loading.gif" alt="加载中" />加载中...</div>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
function bottomScrollLoading(contentObj, loadingObj, getUrl) {
    var loading = false;
    var over = false;

    $(window).scroll(function () {
        if (loading || over) {
            return; // 已经在加载中了，再拖也没有用
        }

        var scrollTop = $(window).scrollTop();
        var clientHeight = $(window).height();
        // var clientHeight = document.body.clientHeight; // 如果没有为网页指定 DOCTYPE，则用这句代替上一句
        if (Math.ceil(scrollTop + clientHeight) < Math.floor($(document).height())) {
            // 小数会影响判断，所以使用了 Math
            return; // 还没有拖到底
        }

        loading = true;
        $(loadingObj).show(); // 显示“加载中”
        $(window).scrollTop(scrollTop + $(loadingObj).height()); // 继续滚动，让“加载中”显示完整
        // ajax 读取
        $.ajax({
            url: getUrl(),
            success: function (data) {
                // setTimeout(function (){
                if (data != "") {
                    $(contentObj).append(data);
                }
                else {
                    $(loadingObj).text("没有更多了...");
                    $(loadingObj).show();
                    over = true;
                }
                // }, 5000); // 为了效果明显，作了延迟，调试用。
            },
            complete: function () {
                // setTimeout(function (){
                if (!over) {
                    $(loadingObj).hide();
                }
                $(window).scrollTop(scrollTop); // 由于前面为了显示“加载中”让网页下滚了，这里要复原，否则如果遇到加载的内容高度 < “加载中”高度，就会导致又触发滚动加载。
                loading = false;
                // }, 5000); // 为了效果明显，作了延迟，调试用。
            }
        });
    });
}


$(window).ready(function (){
	var startRowIndex = 0;
	bottomScrollLoading("#list", "#bottomLoading", function () { startRowIndex += 20; return "data.htm?startRowIndex=" + startRowIndex; });
});
</script>

</body>

</html>
<<返回首页<<