浏览器下拉刷新

/**

*      lazyload.js  

*  当滚动条到页面最底端时 自动加载数据
 * cfg 配置参数数组
 * { 
 *  loadfunc:自定义加载函数的名称
 * }
 * doc 兼容IE FF 的网页dom对象
 * load 触发自定义加载函数   加载内容
 * setcfg 接受用户传入的配置参数
 * init 给浏览器绑定滚动条事件
 * scroll 浏览器滚动触发的回调函数
 * 
 * 注意 请不要将用于标记的DIV设为display:none 否则将无法得到offsetTop的值
 */
var lazyload = {
 
     cfg:{loadfunc:null},
          
     load:function(){
              if(typeof eval(this.cfg.loadfunc) == 'function'){
                       this.destroy();//注销滚动条事件
                       eval(this.cfg.loadfunc+'();');//调用处理函数
                       return;
              }
              alert('请确认加载函数是否已经定义?');
     },
 
     setcfg:function(a){//a 为array
           if(typeof a == 'object'){//判断a 是否为数组
               for(var key in a){
                    this.cfg[key] = a[key];//将配置的值赋给lazyload对象的配置参数
               }
               return;
      }
          alert('请确认配置参数格式是否正确?');
     },
 
     register:function(){//初始化 给浏览器绑定滚动事件
          if(window.attachEvent){//IE
                   window.attachEvent("onscroll",this.scroll,false);
          }else{//FF
                   window.addEventListener("scroll",this.scroll,false);
          }
     }
     ,
     scroll:function(){//滚动条 开始滚动 并计算是否到达底部
           //判断滚动条滚到了网页最底部
           var a = document.documentElement.scrollTop==0? document.body.clientHeight :             document.documentElement.clientHeight;
           var b = document.documentElement.scrollTop==0? document.body.scrollTop :             document.documentElement.scrollTop;
           var c = document.documentElement.scrollTop==0? document.body.scrollHeight :             document.documentElement.scrollHeight;
  
           if(a+b == c){
                lazyload.load();//开始加载
           }
     }
     ,
     destroy:function(){//注销onscroll事件 防止加载数据的时候继续加载
              if(window.attachEvent){//ff
                   window.detachEvent("onscroll",this.scroll,false);  
              }else{//ie
                       window.removeEventListener("scroll",this.scroll,false);
              }
     }
 
};

 

 

页面:

<script src='js/lazyload.js'></script>
<script>
function loadcomment(){
     //请求加载内容
     //加载完毕后 内容更新  重新注册事件
     $.ajax({
          ...
          ...
          ...//省略代码
          ,
          success:function(content){
               /*....
                   将得到的内容 放入要刷新的框中
               ....*/
               lazyload.register();
      }
 })
}

 

window.onload = function(){
     lazyload.setcfg({
              loadfunc : "loadcomment",//加载数据的方法名
     });

     lazyload.register();//注册滚动条事件
}

</script>

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值