infinite-ajax-scrol

infinite-ajax-scroll是一个无限加载分页的插件，在最新版本中已经不依赖于jquery了，我的网站用的就是这个插件实现的无限加载分页。不过在更新Jquery到1.9之后这个插件出了一点兼容性问题。所以我尝试升级到2.3.1版本，但是这个版本没有一个压缩好的JS文件，我懒得自己压缩了，最后还是用上了最新版本的ias。研究了最新版本和三个版本的使用区别。

1.X

这是实现我的博客的自动加载分页，并且兼容了Google统计和Lazyload异步加载图片。

$.ias({
     triggerPageThreshold: 5,
     history: false,
     container: '.content',
     item: '.excerpt',
     pagination: '.pagination',
     next: '.next-page a',
     loader: '<div class="pagination-loading"><i class="fa fa-spinner fa-spin"></i> 数据载入中...</div>',
     trigger: '下一页',
     onPageChange: function(a, b) {
       window._gaq &&
         window._gaq.push([
           '_trackPageview',
           jQuery('<a/>')
             .attr('href', b)[0]
             .pathname.replace(/^[^\/]/, '/')
         ])
     },
     onRenderComplete: function() {
       requirejs(['lazyload'], function() {
         $('.excerpt .thumb').lazyload({
           placeholder: jsui.cdn + 'https://cdn.meitianxue.net/assets/img/loading.gif',
           threshold: 400
         })
       })
     }
   })

2.X

跟1.X版本比起来显得就有条例了，使用这个版本必须把github仓库里面的callback.js和extension一起加载，跟1.X比起来把一些功能做成了拓展。

var ias = $.ias({
    container: ".content", //包含所有文章的元素
    item: ".article", //文章元素
    pagination: ".page_navi", //分页元素
    next: ".page_navi a:eq(-2)", //下一页元素
});

ias.extension(new IASTriggerExtension({
    text: 'Load more items', //此选项为需要点击时的文字
    offset: 2, //设置此项后，到 offset+1 页之后需要手动点击才能加载，取消此项则一直为无限加载
}));
ias.extension(new IASSpinnerExtension());
ias.extension(new IASNoneLeftExtension({
    text: 'You reached the end.', // 加载完成时的提示
}));
ias.on('rendered', function(items) {
    $("img.lazy").lazyload({effect:"fadeIn"}); //这里是你调用Lazyload的代码
})

3.X

我现在就换成这个了，相比1.X版本配置起来稍微麻烦了点，也不知道兼容性咋样

let ias = new InfiniteAjaxScroll('.content', {
        item: '.excerpt',
        next: '.next-page a',
        pagination: '.pagination',
        spinner: {
          element: '.pagination-loading',
          delay: 600,

          // this function is called when the button has to be shown
          show: function(element) {
            element.style.display = 'block' // default behaviour
          },

          hide: function(element) {
            element.style.display = 'none' // default behaviour
          }
        }
      })
      ias.on('loaded', function(item, url, xhr) {
        requirejs(['lazyload'], function() {
          $('.excerpt .thumb').lazyload({
            placeholder: jsui.cdn + 'https://cdn.meitianxue.net/assets/img/loading.gif',
            threshold: 400
          })
        })
      })