升级Infinite Ajax Scroll的方法

　　几年前曾经在几篇文章中介绍过Infinite Ajax Scroll这个插件，（参见：使用Infinite Ajax Scroll实现下拉加载效果，通过谷歌分析统计Infinite Ajax Scroll数据）由于该插件已经升级为3.0新版本，老版本2.3.1已经不维护，因此我这里介绍一下老版本升级到新版本的方法。

　　新版本的调用方法和老版本有不少区别，并且新版本已经不再需要jQuery，相对来说更为轻量一些。

　　举例说明一下如何从老版本升级到新版本。

　　一个页面的内容如下：

<div class="container">
  <div class="item">...</div>
  <div class="item">...</div>
</div>
<div id="pagination">
  <a href="page1.html">1</a>
  <a href="page2.html" class="next">2</a>
</div>

　　老版本的 Infinite Ajax Scroll 需要增加的代码如下：

var ias = $.ias({
  container:".container",
  item:".item",
  pagination:"#pagination",
  next:".next a",
  loader:""
});
ias.extension(new IASSpinnerExtension());

　　新版本的代码修改为

let ias = new InfiniteAjaxScroll('.container', {
  item: '.item',
  next: '.next',
  pagination: '#pagination',
  spinner: '.loader',
});
ias.on('load', function(event) {
  event.nocache = true; // prevent IAS from adding a timestamp query param to the url
});

　　最后三行可阻止新版自动在链接后面加随机参数，这个随机参数很讨厌，经常引起各种莫名其妙的代码错误。

　　新版本没有默认的spinner loder，因此需要手动设置，设置方法是：先在pagination标签前增加一个名为loader的标签，代码如下：

<div class='loader'></div>

　　之后增加一段CSS代码，代码如下：其中动图GIF可自行选择比较好看的即可。

.loader {
  height: 32px;
  margin-top: 0;
  text-align: center;
  background: transparent url('loading.gif') no-repeat center center;
  background-size: 32px 32px;
  opacity: 0;
  animation: flipAnimation 1s infinite;
  transition: opacity 300ms;
}

　　对于Google Analytics（谷歌分析）的统计，可以增加如下代码实现翻页统计。

ias.on('page', (event) => {
  // update the title
  document.title = event.title;
  // update the url
  let state = history.state;
  history.replaceState(state, event.title, event.url);
  // update the Google Analytics
  ga('create', 'UA-XXXXX-Y', 'auto');
  ga('send', 'pageview', event.url);
})

　　上面代码将会在每一次url地址变换时候加载，需要使用analytics.js格式的Google Analytics代码，UA需要换成用户自己的数字，倒数2、3行即可将页面加载统计进去。

　　经过增加上面的代码，用户就可以通过Google Analytics（谷歌分析）来统计出Infinite Ajax Scroll插件加载的页面的PV数据了。