Ajax dynamic scroll loading example

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> 
<!--Data loading prompt, hidden by default--> 
<div class ="add-more">Data is loading...</div> 
<!--js part-- > 
<script type="text/javascript"> 

    $( function (){
         var downrange = 100;                 // Lower boundary-reference is loading prompt layer/px 
        var num = <?= $page ;?>;                 // Initial page number 
        var maxnum = num+5;                     // Set the number of loading 
        var  $main = $(".showbox");             // Main 
        var  $loaddiv = $(".add-more"        ) // Load the prompt layer
        var totalheight = 0 ;            
         // Determine whether asynchronous 
        function is needed ifLoad(){
             // The distance from the top of the scroll bar 
            var scrolltotop=parseFloat($(window). scrollTop());
             //The height of the window 
            var winheight = parseFloat($(window ). height());
             // Total height of content 
            var conheight = parseFloat($(document).height())- downrange; 
             // Total height 
            totalheight = scrolltotop + winheight; 

            //To determine whether to load, when the operation height is higher than the content Large, plenty of space -> load 
            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){
                         // Append data 
                        $main . append(result); 
                } 
            }) 
        } 

        // Hide and display 
        during loading $loaddiv .ajaxStart( function (){
             $(this).show();
            }).ajaxStop(function(){
                $(this).hide();
            })

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

    })
</script>

</body>
</html>

Asynchronous file:

<?
 // Database configuration file 
include ("conn.php" ); 

// Display information per page 
$pagesize =20 ; 

// Maximum loading times 
$maxnum = $_POST ["maxnum"]-1 ; 

// Where to start 
$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);

    //);
    $querysum(mysql_num_rows=$totalTotal data//
    Parameter corresponding location: total records, number of items displayed on each page, current page, connected address 
    $my_page = new PageClass( $total , $pagesize , $page ,'?page={page}' );
     // output page number 
    echo  $my_page -> myde_write();
     exit ; 
}
 ?>

Ajax dynamic scroll loading example

Guess you like