預(yù)覽：
https://jirengu-inc.github.io/jrg-renwu8/homework/%E5%BC%A0%E8%BD%A9/renwu29-3/renwu29-3.html
源碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>renwu29-3</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
</head>
<style>
.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;
}
</style>
<body>
<div class="line">1</div>
<div class="line">2</div>
<button class="button">click</button>
<script>
$('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<arr.length;i++){
$('.line:last').after('<div class="line">'+arr[i]+'</div>');
}
};
}
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;
//原本作為優(yōu)化已加載圖片不執(zhí)行怨咪，但對(duì)于以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(){
//優(yōu)化滾輪停止時(shí)才執(zhí)行
isimg(node);
}, 500)
})
}
return{
bind:bind
}
})()
zhangxuan.bind($('.button'));
</script>
</body>
</html>
php
<?php
// 后端 php 測(cè)試接口文件
$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: ['內(nèi)容1','內(nèi)容2','內(nèi)容3']}
sleep(0.5);
echo json_encode($ret);
?>
