php ajax 懒加载demo,懒加载与ajax的组合应用

renwu29-3

.line{

height: 500px;

line-height: 500px;

border: 1px solid grey;

border-radius: 5px;

padding: 10px;

margin: 5px;

}

.button{

padding: 5px;

width: 80px;

border-radius: 5px;

margin: 5px;

outline-style: none;

}

.hover{

background-color: #6fc;

}

1

2

click

$('body').on('mouseenter', 'div', function(){

$(this).addClass('hover');

})

$('body').on('mouseleave', 'div', function(){

$(this).removeClass('hover');

})

/*

接口

1.url;

2.get,post

3.输入：

{

start：2，

length：6

}

4.输出:

{

status：1 --OK

data：[3,4,5,6,7,8]

status：0 --ERROR

}

*/

var getdata=(function(){

function data(){

$.ajax(

{

url:'renwu29-3.php',

dataType:'json',

type:'get',

data:{

start:$('.line').length,

len:6

},

success:function(json){

onSuccess(json);

},

error:function(){

onError();

},

}

);

function onSuccess(json){

if(json.status==1){

append(json.data);

}

else{

alert('获取失败');

}

};

function onError(){

alert('链接失败');

};

function append(arr){

for(var i=0;i

$('.line:last').after('

'+arr[i]+'

');

}

};

}

return {

data:data

}

})()

var zhangxuan=(function(){

function showimg(p){

getdata.data();

}

function isimg(node){

node.each(function(){

var $node=$(this),

$dscrollTop=$(document).scrollTop(),

$wwidth=$(window).height(),

$picoffsetTop=$node.offset().top;

//原本作为优化已加载图片不执行，但对于以DOM为参照物的方法不需要

// if(!!$node.data('isload')){

// return

// }

// else{

if(($dscrollTop+$wwidth)>$picoffsetTop){

showimg($node);

}

})

}

function bind(node){

var clock;

$(window).on('scroll', function(){

if(clock){

clearTimeout(clock);

}

clock=setTimeout(function(){

//优化滚轮停止时才执行

isimg(node);

}, 500)

})

}

return{

bind:bind

}

})()

zhangxuan.bind($('.button'));

php

// 后端 php 测试接口文件

$start = $_GET['start']; //2

$len = $_GET['len']; //6

$items = array();

for($i = 1; $i < $len; $i++){

array_push($items, ($start+$i));

}

$ret = array('status'=>1, 'data'=>$items);

//{status: 1, data: ['内容1','内容2','内容3']}

sleep(0.5);

echo json_encode($ret);

?>