Ajax动态滚动加载实例

最新推荐文章于 2021-08-06 11:55:21 发布

jjiale

最新推荐文章于 2021-08-06 11:55:21 发布

阅读量564

点赞数

分类专栏：前端

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

index.php

<?
//数据库配置文件
include("conn.php");
//默认搜索
$page = $_GET["page"] ? $_GET["page"] : 1;
$pagesize = 20;
$pageval = ($page-1)*20;

$sql="select `pic` from `mypic` limit $pageval,$pagesize";
$query = mysql_query($sql);
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://files.cnblogs.com/tinyphp/jquery-1.3.2.min.js"></script>
<link rel="stylesheet" href="page.css">
<title>延迟加载</title>
</head>
<style type="text/css">
    .showbox{ width:1000px; margin:0 auto;}
    .showbox img{ padding:5px; background:#CCCCFF;}
    .add-more{ width: 1000px; background: yellow;height: 100px; line-height: 30px; text-align: center; margin: 0 auto; display: none;}
</style>
<body>
<div class="showbox">
<?
    while($row=mysql_fetch_array($query)){
?>
<img src="<?=$row["pic"];?>" alt="" width="200" height="200">
<?
    }
?>
</div>
<!--数据加载提示，默认隐藏-->
<div class="add-more">数据正在加载...</div>
<!--js部分-->
<script type="text/javascript">

    $(function(){
        var downrange    = 100;                //下边界-参考正在加载提示层/px
        var num = <?=$page;?>;                //初始页码
        var maxnum = num+5;                    //设置加载次数
        var $main = $(".showbox");            //主体
        var $loaddiv = $(".add-more")        //加载提示层
        var totalheight = 0;            
        //判断是否需要异步
        function ifLoad(){
            //滚动条距离顶部距离
            var scrolltotop=parseFloat($(window).scrollTop());
            //窗口高度
            var winheight = parseFloat($(window).height());
            //内容总高度
            var conheight = parseFloat($(document).height())-downrange; 
            //总高度
            totalheight = scrolltotop + winheight;

            //判断是否加载，当操作高度比内容大，空间充裕->加载
            if(totalheight >= conheight && num!=maxnum){
                ajaxLoad(num);
                num++;
            }

        }

        //ajax-fun
        function ajaxLoad(page){
            $.ajax({
                url:"ajax.php",
                type:"post",
                data:{page:page,maxnum:maxnum},
                success:function(result){
                        //追加数据
                        $main.append(result);
                }
            })
        }

        //加载中隐藏显示
        $loaddiv.ajaxStart(function(){
             $(this).show();
            }).ajaxStop(function(){
                $(this).hide();
            })

        //scroll-fun
        $(window).scroll(ifLoad);

    })
</script>

</body>
</html>

异步文件：

<?
//数据库配置文件
include("conn.php");

//每页显示信息
$pagesize=20;

//最大加载次数
$maxnum = $_POST["maxnum"]-1;

//从哪里开始
$page=$_POST["page"];
$nextpagestart = $page*$pagesize;

$sql = "select `pic` from `mypic` limit $nextpagestart,$pagesize";
$query =mysql_query($sql);
while($row = mysql_fetch_array($query)){
    //内容
?>
<img src="<?=$row["pic"];?>" alt="" width="200" height="200">
<?
}

//分页
if($page ==$maxnum){
    include('page.class.php');
    $sqlsum = "select `id` from `mypic`";
    $querysum = mysql_query($sqlsum);

    //数据总数
    $total = mysql_num_rows($querysum);
    //参数对应位置：总记录，每页显示的条数，当前页，连接的地址
    $my_page=new PageClass($total,$pagesize,$page,'?page={page}');
    //输出页码
    echo $my_page->myde_write();
    exit;
}
?>