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

PHP实现懒加载效果

来源：中国U网日期：2018-01-31 类别：程序编程点击：5215

“对于网页来说，懒加载已经不是什么新鲜玩意儿，只是今天用到了这个效果，当个笔记，记录一下。通常来说，一般需要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>

<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网-海外服务器租用

PHP实现懒加载效果

服务器租用

云服务器租用

专题栏目

服务中心

联系方式

欢迎使用UChat客服系统!