web页面滚动加载数据 代码分析

依赖jq/zepto

function pullDownLoad(container, prerender, callback) {

  var tpl = '<div id="loading">加载中。。。。。</div>';
  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
下载源码:下载源码

发表评论

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