依赖jq/zepto

function pullDownLoad(container, prerender, callback) {

var tpl = '

加载中。。。。。

';
var lock = 0;

//因不同浏览器存在差异,所以可以自定义 加载的距离
prerender = prerender || 0;
$(window).on('scroll', (function() {

//滚动条滑动的距离
var scrollPos = $(window).scrollTop();

//总的滑动距离 = 窗体高度 + 滚动条滑动的距离 + 自定义距离
var totalHeight = parseFloat($(window).height()) + parseFloat(scrollPos) + prerender;

//页面文档高度 <= 总的滑动距离 && 未锁定 if (($(document).height()) <= totalHeight && lock == 0) { //加载动画 $(container).append(tpl); //执行回调 callback && typeof callback === 'function' && callback(); //锁定三秒 防止多次加载 lock = 1; setTimeout(function() { lock = 0; },3e3) } })); } pullDownLoad('#content',50,function() { //请求数据 $.ajax({ url: 'xxxxxxxxxxx', type: 'get', data: { formData: 'xxx' }, dataType: 'json', success: function(ret) { $('#loading').remove(); $('#content').append(ret.data) } }) })
点击右侧链接查看demo:滚动加载数据demo
下载源码:下载源码

发表评论

电子邮件地址不会被公开。 必填项已用*标注

Captcha Code