您现在的位置:首页 > 帮助中心 > 程序编程 > PHP实现懒加载效果

PHP实现懒加载效果

来源:中国U网 日期:2018-01-31 类别:程序编程 点击:804
对于网页来说,懒加载已经不是什么新鲜玩意儿,只是今天用到了这个效果,当个笔记,记录一下。通常来说,一般需要3个文件来实现,HTML页面,PHP程序页面,Javascript程序页面。

对于网页来说,懒加载已经不是什么新鲜玩意儿,只是今天用到了这个效果,当个笔记,记录一下。

通常来说,实现懒加载效果一般需要三个文件和一个JSON的数据结构。三个文件分别是HTML页面,PHP程序页面和Javascript程序页面。

1、HTML页面:主要用来调用JS去获取数据,并通过当前页面用HTML的方式展示出来

<!Doctype html>
<html>
<head>
    <title>滚动到页面顶部的懒加载效果</title>
    <script src="/js/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="load.js" type="text/javascript"></script>
     <style type="text/css">
            .mainDiv {
                width: 800px;
                border: solid 1px #09C;
                padding: 10px;
            }
 
            .item {
                width: 600px;
                height: 50px;
                border: solid 1px #0C3;
                font-size: 14px;
                margin: 10px;
padding:10px;
            }
 
            .title {
                font-size: 16px;
                line-height: 20px;
            }
 
            .content {
                line-height: 14px;
            }
            .alink
            {
                display:none;
            }
            .loaddiv
            {
               display:none; 
            }
     </style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
<body>
    <h1>滚动到页面顶部的懒加载效果</h1>
    <div class="mainDiv">
        <!--<div class="item">
            <div class="title">title</div>
            <div class="content">content content content content content content content</div>
        </div>
        -->
    </div>
    <div class="loaddiv">
        <img src="load.gif" />
    </div>
    <div>
        <a href="javascript:void(0);" id="btn_Page" class="alink">查看更多>>></a>
    </div>
</body>
</html>
 
2、PHP程序文件:主要是获取数据并转化成JSON的格式
 
<?php
$pagesize = $_REQUEST["pagesize"];
$pagenumber = $_REQUEST["pagenumber"];
if (!is_numeric($pagesize) || !is_numeric($pagenumber)){
echo '';
} else {
$start=($pagenumber-1)*$pagesize;
$sql = "SELECT * FROM project LIMIT $start, $pagesize";
$result = mysql_query($sql);
$data= array();
while($row = mysql_fetch_assoc($result)){
$array[] = $row;
}
echo  json_encode($data);
}
?>

3、Javascript程序文件:主要是解析,加载从PHP获取的数据并通过HTMl的方式展示出来。

var gPageSize = 10;
var i = 1; //设置当前页数,全局变量
$(function () {
    //根据页数读取数据
    function getData(pagenumber) {
        i++; //页码自动增加,保证下次调用时为新的一页。
        $.get("/load/load.php", { pagesize: gPageSize, pagenumber: pagenumber }, function (data) {
            if (data.length > 0) {
                var jsonObj = JSON.parse(data);
                insertDiv(jsonObj);
            }
        });
        $.ajax({
            type: "post",
            url: "/load/load.php",
            data: { pagesize: gPageSize, pagenumber: pagenumber },
            dataType: "json",
            success: function (data) {
                $(".loaddiv").hide();
                if (data.length > 0) {
                    var jsonObj = JSON.parse(data);
                    insertDiv(jsonObj);
                }
            },
            beforeSend: function () {
                $(".loaddiv").show();
            },
            error: function () {
                $(".loaddiv").hide();
            }
        });
    }
    //初始化加载第一页数据
    getData(1);
 
    //生成数据html,append到div中
    function insertDiv(json) {
        var $mainDiv = $(".mainDiv");
        var html = '';
        for (var i = 0; i < json.length; i++) {
            html += '<div class="item">';
            html += ' <div class="title">' + json[i].row_id + '   ' + json[i].project_name + '</div>';
            html += ' <div class="content">' + json[i].project_name + '   ' + json[i].project_password + '</div>';
            html += '</div>';
        }
        $mainDiv.append(html);
    }
 
    //==============核心代码=============
    var winH = $(window).height(); //页面可视区域高度 
 
    var scrollHandler = function () {
        var pageH = $(document.body).height();
        var scrollT = $(window).scrollTop(); //滚动条top 
        var aa = (pageH - winH - scrollT) / winH;
        if (aa < 0.02) {//0.02是个参数
            if (i % 10 === 0) {//每10页做一次停顿!
                getData(i);
                $(window).unbind('scroll');
                $("#btn_Page").show();
            } else {
                getData(i);
                $("#btn_Page").hide();
            }
        }
    }
    //定义鼠标滚动事件
    $(window).scroll(scrollHandler);
    //==============核心代码=============
 
    //继续加载按钮事件
    $("#btn_Page").click(function () {
        getData(i);
        $(window).scroll(scrollHandler);
    });
});
4、JSON数据结构
[
  {
    "row_id": 1,
    "project_name": "项目名称1", 
    "project_password": "项目密码1",
    "project_else": "项目其他内容1"  
  },  
  {
    "row_id": 2, 
    "project_name": "项目名称2",  
    "project_password": "项目密码2",  
    "project_else": "项目其他内容2"  
  },  
  {
    "row_id": 3,  
    "project_name": "项目名称3",  
    "project_password": "项目密码3",  
    "project_else": "项目其他内容3"  
  },  
  {
    "row_id": 4, 
    "project_name": "项目名称4",  
    "project_password": "项目密码4",  
    "project_else": "项目其他内容4"  
  }, 
  {
    "row_id": 5, 
    "project_name": "项目名称5",  
    "project_password": "项目密码5",  
    "project_else": "项目其他内容5"  
  }, 
  {
    "row_id": 6,  
    "project_name": "项目名称6",  
    "project_password": "项目密码6",  
    "project_else": "项目其他内容6"  
  }, 
  {
    "row_id": 7, 
    "project_name": "项目名称7",  
    "project_password": "项目密码7",  
    "project_else": "项目其他内容7"  
  }, 
  {
    "row_id": 8, 
    "project_name": "项目名称8",  
    "project_password": "项目密码8",  
    "project_else": "项目其他内容8"  
  },  
  {  
    "row_id": 9,  
    "project_name": "项目名称9",  
    "project_password": "项目密码9",  
    "project_else": "项目其他内容9"  
  }, 
  {
    "row_id": 10, 
    "project_name": "项目名称10",  
    "project_password": "项目密码10",  
    "project_else": "项目其他内容10"  
  }
]

这是最常见的懒加载的方式,四个部分缺一不可。当然,三个文件里面只是简单的原理实现,每个人可以再去实现更丰富更优化的写法。


关键词:PHP,PHP懒加载,PHP实现懒加载
PHP实现懒加载效果为中国U网原创文章,在不经过允许的情况下,禁止用于商业用途或随意转载,转载请注明出处,并加上本页链接地址:
http://www.cuwww.com/help/detail-82.html
版权所有 中国U网 侵权必究 免责声明 互联网不良信息举报
旺旺:点击这里给我发消息
售前:cuwww
售前:cuwww
售后:cuwww
技术:cuwww