关于我
疯狂减肥带
伪前端一只 欢迎调戏
乐天派 但贫穷的钱包限制了享受
希望自己每月能纳1W块的税

网页滚动加载get!

原理

php部分检测x-pjax头 存在即返回页面正文部分
滚动到底部时 发生ajax请求并附上x-pjax头 写入新标签做第二页

前端部分

  1. scroll事件 当页面滚动时触发
  2. ajaxloading为true才可以进行加载(防止多次ajax)
  3. 判断当前地址是否为"/"或者"/page/"及"/category/"这样的地址,是的话继续判断
  4. 判断是否存在下一页 存在的话进行页面滚动判断 是否到达页面底部 到达进行ajax请求 并将ajaxloading设为false 防止再次请求
  5. 显示加载动画并请求 成功则写入最后一个class为nextpage的标签 并移除当前换页栏 隐藏动画 ajaxloading设置为true

 var ajaxloading=true;
  $(window).scroll(function() {
    if (ajaxloading) {
      var pagedz = window.location.pathname;
      if (pagedz == "/" || pagedz.indexOf('/page/') == 0||pagedz.indexOf('/category/')==0) {
        var url = $('.next:last>a').attr('href');
        if (url&&url!=document.location.href) {
          var scrollTop = $(this).scrollTop();
          var scrollHeight = $(document).height();
          var windowHeight = $(this).height();
          if (parseInt(scrollTop + windowHeight)+2>= scrollHeight) {
            ajaxloading=false;
            $('.cssload-fond').show();
            $.ajax({
              url: url,
              dataType: 'html',
              timeout: 5000,
              beforeSend: function(xhr) {
                xhr.setRequestHeader('X-PJAX', 'true')
              },
              success: function(data) {
                console.log('ok');
                ajaxloading=true;
                $('.nextpage:last').html(data);
                var state = {
                  title: document.title,
                  url: url,
                };
                window.history.pushState(null, document.title, url);
                $('.page-navigator:first').remove();
                $('.cssload-fond').hide();
              },
              error: function(data) {
                console.log("eero" + data);
                sendmessage('ajax失败');
                $('.cssload-fond').hide();
              }
            })
          }
        }
      };
     };
});

发表于
分类:教程
评论
已喜欢
朗读
微博分享 复制链接 二維碼