用jQuery写的按需加载代码

首先我来讲解一下基本原理,

1.ajax按需加载原理是和分页的原理是一样的,我们只需要给后台传入页数以及每页显示的条数即可,前台的操作由前台完成,
2,就是前台,当我们的滚动条滑动到底部的时候自动加载接下来的数据,所以就需要使用窗口滚动事件,
我这里主要讲的是jQuery的代码,原生态的代码可能要多一点,但原理都是一样的
$(window).scrollTop() ;滚动条滚动的高度
$(document).height() : 当前文本的高度,
$(window).height() : 浏览器窗口的高度,即我们能看到的浏览器高度(视窗区域)
在这里我放一张图,可能更好理解一点:

var page = 0; //传入的页数
var limit = 30; //每页显示的条数
$(window).scroll(function(){ //窗口滚动时间
//当滚动条的距离 = 文本的高度 - 浏览器窗口的高度,也就是滚动条滚动到底部的时候;,此时进行判断,并用ajax异步加载数据,并返回给前台显示;
if( $(window).scrollTop() == $(document).height() - $(window).height() ){
page ++;
$.ajax({
type:‘post’,
url:’{:url(“index/index/getImgJson”)}’,
data:{‘page’:page,‘limit’:limit},
async: true,//同步
success:function(data){
var oJson = JSON.parse(data); //将后台传过来的数据(data),转换为json
var str = ‘’;
//循环遍历数据,并放在HTML标签里,用jQuery添加到DOM对象里面去.
for(var index = 0;index < oJson.length-1;index ++){
str +="

• <a href=“UPLOAD”+oJson[index].p_photo+"" data-lightbox=“01”><img src=“UPLOAD”+oJson[index].p_photo+"" width=“150px;”/>
• ";
  }
  if( str == ‘’ ){
  $(".bottom").html(‘
  已经到底部了
  ’);
  }else{
  $(".photo-list").append(str);
  }
  },
  });
  }
  });

  此时,我们ajax按需加载就完成了.