滚动条拖动加载数据 (function($, window, undefined) { $.fn.DataLazyLoad = function(options) { var elements = $(this); var settings = { //Data Load Offset offset : 200, //Load data callback load : function () { }, //Which page to load page : 2 } if (options) { $.extend(settings, options); } //The height of the browser window var winHeight = $(window).height(); var locked = false; var unLock = function (nextPage) { //Next load page, 0 is end if (nextPage > 0) { settings.page = nextPage; locked = false; } } //注意如果是页面只有一个滚动条可以直接使用$(window) //如果有多个滚动条则指的是滚动条容器,这样当滚动条拖动时就会加载数据 $(elements).scroll(function () { var scrollTop = $(window).scrollTop(); //elements height + elements top - (scrollbar top + browser window height) var offset = $(elements).offset().top + $(elements).height() - (scrollTop + winHeight); if(offset < settings.offset && !locked){ locked = true; settings.load(settings.page, unLock); } }); } })(jQuery, window);
引入上面的js代码块。
//延迟加载 //计算页数 var maxLength=parseInt(data.errorList.length/100)+1; //这里指的是滚动条dom $("#feedbackContainer [id=scrollDiv]").DataLazyLoad({page:2,load : function(page, unLocked){ var html = ''; var max = maxLength; $(getRows(data,page)).appendTo($("#feedbackContainer [id=errorInfor]")); page = page >= max ? 0 : page + 1; unLocked(page); }});