Original link: https://www.williamlong.info/archives/6814.html
A few years ago, the Infinite Ajax Scroll plugin was introduced in several articles (see: Using Infinite Ajax Scroll to achieve drop-down loading effect , statistics Infinite Ajax Scroll data through Google Analytics ) Since the plugin has been upgraded to a new version of 3.0, the old version 2.3.1 is no longer maintained, so I will introduce the method of upgrading the old version to the new version.
The calling method of the new version is quite different from the old version, and the new version no longer requires jQuery, which is relatively lighter.
Give an example of how to upgrade from an old version to a new version.
The content of a page is as follows:
<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>
The code that needs to be added to the old version of Infinite Ajax Scroll is as follows:
var ias = $.ias({
container: “.container”,
item: “.item”,
pagination: “#pagination”,
next: “.next a”,
loader: “”
});
ias.extension(new IASSpinnerExtension());
The new version of the code is modified to
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
});
The last three lines prevent the new version from automatically adding random parameters after the link. This random parameter is very annoying and often causes all kinds of inexplicable code errors.
The new version does not have a default spinner loder, so it needs to be set manually. The setting method is: first add a label named loader before the pagination label. The code is as follows:
<div class=’loader’></div>
Then add a CSS code for the animation style, the code is as follows, in which the animation GIF can choose a better-looking loading animation.
.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;
}
For Google Analytics statistics, you can add the following code to implement page turning statistics.
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);
})
The above code will be loaded every time the url address is changed, and the Google Analytics code in the analytics.js format needs to be used. The UA needs to be replaced with the user’s own number, and the page loading can be counted in the last 2 or 3 lines.
After adding the above code, users can count the PV data of the pages loaded by the Infinite Ajax Scroll plugin through Google Analytics.
This article is reprinted from: https://www.williamlong.info/archives/6814.html
This site is for inclusion only, and the copyright belongs to the original author.