原理

php部分檢測x-pjax頭 存在即返回頁面正文部分

滾動(dòng)到底部時(shí) 發(fā)生ajax請求并附上x-pjax頭 寫入新標(biāo)簽做第二頁

前端部分

scroll事件 當(dāng)頁面滾動(dòng)時(shí)觸發(fā)

ajaxloading為true才可以進(jìn)行加載（防止多次ajax）

判斷當(dāng)前地址是否為"/"或者"/page/"及"/category/"這樣的地址，是的話繼續(xù)判斷

判斷是否存在下一頁 存在的話進(jìn)行頁面滾動(dòng)判斷 是否到達(dá)頁面底部 到達(dá)進(jìn)行ajax請求 并將ajaxloading設(shè)為false 防止再次請求

顯示加載動(dòng)畫并請求 成功則寫入最后一個(gè)class為nextpage的標(biāo)簽 并移除當(dāng)前換頁欄 隱藏動(dòng)畫 ajaxloading設(shè)置為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();

              }

            })

          }

        }

      };

     };

});