网页滚动加载get!

2019-04-28 13:59:22 7137

原理

php部分检测x-pjax头 存在即返回页面正文部分

滚动到底部时 发生ajax请求并附上x-pjax头 写入新标签做第二页


前端部分

scroll事件 当页面滚动时触发

ajaxloading为true才可以进行加载(防止多次ajax)

判断当前地址是否为"/"或者"/page/"及"/category/"这样的地址,是的话继续判断

判断是否存在下一页 存在的话进行页面滚动判断 是否到达页面底部 到达进行ajax请求 并将ajaxloading设为false 防止再次请求

显示加载动画并请求 成功则写入最后一个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();

              }

            })

          }

        }

      };

     };

});


提交成功!非常感谢您的反馈,我们会继续努力做到更好!

这条文档是否有帮助解决问题?

非常抱歉未能帮助到您。为了给您提供更好的服务,我们很需要您进一步的反馈信息:

在文档使用中是否遇到以下问题: