内容涉及：php、分页、jquery、div+css

实例下载：http://download.csdn.net/detail/roro5119/7373905

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);

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<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;

}

?>

php动态滚动加载实例的更多相关文章

  1. Ajax动态滚动加载数据

    看新浪微博,人人网都有这样的效果:滚动条滚动到最下面的时候,新的数据就被自动加载出来了,今天亲自尝试了一下这个效果的实现. 最开始在CSDN上写了一版,功能比较简单,今天又增加了一个小功能:翻页到指定 ...

  2. PHP+InfiniteScroll实现网页无限滚动加载数据实例

    PHP+InfiniteScroll实现网页无限滚动加载数据实例,实现原理:当滚动条到底离网页底部一定长度的时候,向后台发送页数并获取数据. 首先我们在页面上先放置10条数据,即第一页,每一项都是p标 ...

  3. Java_动态重新加载Class机制

    Java动态重新加载Class 项目中使用到了动态重新加载Class的机制,作用是让一些代码上线之前可以在线上环境测试一下,当然,这是非常不好的测试机制,我刚来的时候也为这种机制感到惊讶—怎么可以在线 ...

  4. 使用javassist运行时动态重新加载java类及其他替换选择

    在不少的情况下,我们需要对生产中的系统进行问题排查,但是又不能重启应用,java应用不同于数据库的存储过程,至少到目前为止,还不能原生的支持随时进行编译替换,从这种角度来说,数据库比java的动态性要 ...

  5. esri-leaflet入门教程（5）- 动态要素加载

    esri-leaflet入门教程(5)- 动态要素加载 by 李远祥 在上一章节中已经说明了esr-leaflet是如何加载ArcGIS Server提供的各种服务,这些都是服务本身来决定的,API脚 ...

  6. js滚动加载小插件

    本文实例讲述了jquery滚动加载数据的方法.分享给大家供大家参考.具体分析如下: 少废话直接上代码!!!粗暴,直接,干脆 0//lk-2017-05-04 1(function($, win) { ...

  7. 记录WEUI中滚动加载的一个BUG

    最近写微信公众号,用到的技术栈是jq+vue的混合开发,采用的UI是移动端比较火的WEUI,在微信开发中应该较广泛.个人看惯了elementUI文档,相对于饿了么组件文档的详细,WEUI的文档还是比较 ...

  8. Vue滚动加载自定义指令

    用Vue在移动端做滚动加载,使用mint-ui框架, InfiniteScroll指令loadmore组件,在uc浏览器和qq浏览器都无法触发.无奈我只能自己写了. 决定用vue 的自定义指令 写滚动 ...

  9. JQuery仿淘宝滚动加载图片

    用 JQuery 制作随着显示页面的滚动条的滚动动态加载图片,适用于图片太多的页面,在访问网页时,可以先只加载第一屏要显示的图片,当用户进行向下滚动查看页面的时候,动态去加载这些图片,好处是减少页面第 ...

随机推荐

  1. ThreadLocal模式探索

    一.首先,ThreadLocal模式使共享数据能多个线程被访问,每个线程访问的只是这个数据的副本,线程之间互不影响. 例子1: package Thread2; public class Counte ...

  2. 一致性hash应用到redis

    理解分布式存储的本质 有一个经典的实践经验: 数(值)据大了, 什么都是问题! 如果要求128B或更大数值计算, 哪么四则运算会是个大问题! 如果要求128T或更大日志存储, 哪么文件存储会是个大问题 ...

  3. 敏捷开发之道（四）Scrum概述

    上次的博文敏捷开发之道(二)极限编程XP和敏捷开发之道(三)极限编程XP续中,我们介绍了一下敏捷开发中的XP开发方法,今天咱们来了解另一个比较流行的敏捷开发方法--Scrum. 1.Scrum简介 S ...

  4. topcoder 673

    DiV1 300:给一组士兵再给一组战马都有权值. 安排战马的顺序的方案数,是第一个士兵和其战马的权值乘积最大. 做法:随便暴力就好. 枚举战马和第一个士兵匹配.其他士兵按权值从大到小排序,战马权值按 ...

  5. 微软职位内部推荐-Sr. Dev Lead

    微软近期Open的职位: JD 如果你想试试这个职位,请跟我联系,我是微软的员工,可以做内部推荐.发你的中英文简历到我的邮箱:Nicholas.lu.mail(at)gmail.com

  6. LoadRunner 学习笔记（3）基础

    LoadRunner包含的组件: Virtual User Generator 录制最终用户业务流程并创建自动化性能测试脚本,即 Vuser 脚本 Controller 组织.驱动.管理并监控负载测试 ...

  7. CentOS6.5安装tomcat7

    把下载的apache-tomcat-7.0.19.tar.gz文件上传到服务器的根目录    #tar zxvf apache-tomcat-7.0.19.tar.gz    #mv apache-t ...

  8. ADT通过svn进行团队开发，svn插件不好使的解决方案

    在使用ADT的svn插件的时候老是会出现各种异常,所以就干脆不用svn插件了,直接将adt的工作空间建在svn上面,以保证团队成员共用一套代码,节约宝贵的整合时间. 使用步骤: 1.首先需要安装好sv ...

  9. 发现一个很好的android开发笔记库

    http://linux.linuxidc.com/ 密码和用户名都是www.linuxidc.com android基础教程到高手进阶,游戏开发,数据存储,android架构等.谢谢网站主分享!

  10. SignalR发布后不能生成signalr/hubs

    问题:代码写完后,在一台服务器上运行没有问题.换到另外一台服务器上,找不到signalr/hubs,显示404错误. SignalR版本:2.0.3 VS版本:2013 服务器:Windows Ser ...