jQuery滚屏加载_Ajax滚屏加载

收藏

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

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

查看演示

加我微信，拉你进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”，有兴趣的朋友可以在本地试试。我已经测试过了，没有数据重复。