jQuery滚屏加载_Ajax滚屏加载

来源:https://www.sucaihuo.com/js/9.html 2015-04-03 20:25浏览(11672) 收藏

我们经常会看到拉动滚动条时到页底时,页面会继续加载更多内容。这种技术我暂且称它为jQuery+Ajax无刷新滚屏加载技术。我们发现图片搜索、新浪微博、QQ空间等将该技术应用得淋漓尽致。
jQuery滚屏加载_Ajax滚屏加载
分类:其它特效 > 页面滚动 难易:中级
下载资源 下载积分: 163 积分

HTML

<div class="demo">
  <h2 class="tip">提示:使用滚动或拉动滚动条向下看。</h2>
  <div id="lists"></div> 
  <div class="nodata"></div>
</div>

jQuery

2、然后,当滚动页面的时候需要做的事情是:计算页面总高度(当滚动底部时,页面新加载数据,所以页面总高度是动态变化的),计算滚动条位置(滚动条位置也是随着加载页面的高度动态变化的),然后构造一个公式,计算相对比例。

var totalpage = 6; //总页数,防止超过总页数继续滚动
var winH = $(window).height(); //页面可视区域高度 
$(window).scroll(function() {
    if (i < totalpage) { // 当滚动的页数小于总页数的时候,继续加载
        var pageH = $(document.body).height();
        var scrollT = $(window).scrollTop(); //滚动条top 
        var rate = (pageH - winH - scrollT) / winH;
        if (rate < 0.01) {
            getJson(i)
        }
    } else { //否则显示无数据
        showEmpty();
    }
});
getJson(0); //加载第一页

3、当滚动条接近页底时,触发ajax加载。getJson 代码如下:

function getJson(page) {
    $(".nodata").show().html("<img src='http://www.sucaihuo.com/Public/images/loading.gif'/>");
    $.getJSON("ajax.php", { page: i}, function(json) {
        if (json) {
            var str = "";
            $.each(json,
            function(index, array) {
                var str = "<div class='per'>";
                var str = str + "<div class='title'>" + array['id'] + "、" + array['title'] + "</div></div>";
                $("#lists").append(str);
            });
            $(".nodata").hide()
        } else {
            showEmpty(); //数据为空的时候
        }
    });
    i++;
}
function showEmpty() {
    $(".nodata").show().html("别滚动了,已经到底了。。。");
}

4、当滚动到页面底部时,前端请求到ajax.php

$page = intval($_GET['page']);  //获取请求的页数 

$pagenum = 12; //每页数量
$start = ($page - 1) * $pagenum;
$query = mysql_query("SELECT * FROM food ORDER BY id ASC LIMIT $start," . $pagenum . "");
$arr = array();
while ($row = mysql_fetch_array($query)) {
    $arr[] = array(
        'id' => $row['id'],
        'title' => $row['title']
    );
}
if ($arr) {
    echo json_encode($arr);  //转换为json数据输出 
}

另外下载压缩包里有jQuery滚屏加载需要的表 “food.sql”,有兴趣的朋友可以在本地试试。我已经测试过了,没有数据重复。

评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2