2022年5月31日星期二

升级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数据了。