jquery滚动条延迟加载

阅读更多

 

滚动条拖动加载数据
(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);
    }});