最新赞助活动温馨提示:9.9元终身VIP,学生和没有工作的整站资源免费下载!
头像

jQuery滚屏加载_Ajax滚屏加载

来源:http://www.erdangjiade.com/ 二当家的 2014-04-21 15:05浏览(1679)

我们经常会看到拉动滚动条时到页底时,页面会继续加载更多内容。这种技术我暂且称它为jQuery+Ajax无刷新滚屏加载技术。我们发现图片搜索、新浪微博、QQ空间等将该技术应用得淋漓尽致。

0、请不要问“在不在”之类的问题,有问题直接问!1、学生或暂时没有工作的童鞋,整站资源免费下载!2、¥9.9充值终身VIP会员,加我微信,826096331 拉你进VIP群学习!3、程序员加油,技术改变世界。在线 充值

jQuery滚屏加载_Ajax滚屏加载
分类:其它特效 > Ajax 难易:中级
查看演示 下载资源: 141

加我微信,拉你进VIP群学习:

下载资源 下载积分: 30 积分

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.erdangjiade.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”,有兴趣的朋友可以在本地试试。我已经测试过了,没有数据重复。

声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/9.html
评论0
头像

友情提示:垃圾评论一律封号 加我微信:826096331拉你进VIP群学习群

1 2