java实现懒加载_Java Web SpringMVC AJAX，实现页面懒加载数据

因为做的微信端的网页，所以在显示后台数据的时候，要么分页，要么全部加载数据，开始分页对于用户来说，其实体验不是很好，毕竟要去不断的点击下一页，但是如果我把全部数据读取出来的话，但用户可能也就看前面几条而已，那么就会造成性能的大大浪费。

所以我就上网找了ajax懒加载方面的内容，成功实现了，在用户滚动的时候判断是否到达页面底部，是的话就通过ajax请求数据，然后显示出来。

javascript代码

$(function() {

// 记录页数

var $page = 1;

// 懒加载

var winH = $(window).height(); //页面可视区域高度

$(window).scroll(function () {

var pageH = $(document.body).height();

var scrollT = $(window).scrollTop(); //滚动条top

var aa = (pageH-winH-scrollT)/winH;

if(aa<0.02){

$page++;

$.ajax({

type : "get",

url : "",

dataType : "json",

success : function(data) {

if (data) {

$.each(data,function(index,array){

$comment += "

";

$comment += "

";

$comment += "";

$comment += "" + array['author'] + "";

$comment += "

";

$comment += "《" + array['book']['title'] + "》";

$comment += "

";

$comment += "

";

$comment += "" + array['content'] + "";

$comment += "

";

$comment += "

";

$(".index_list").append($comment); // 把上面的html添加到要显示的标签上

});

}

}

});

}

});

});

java代码

@RequestMapping(value = "/getdata/{page}", method = GET)

@ResponseBody

public List indexPage(

@PathVariable int page) {

page--;

page = page < 0 ? 0 : page;

List bookComments = rmbookCommentService.getToIndexByLimit(

page*ReadMeetInitParameters.getCountPerPage(), ReadMeetInitParameters.getCountPerPage());

return bookComments;

}