Masonry-style infinite loading is an alternative pagination approach for WordPress. On sites that use this type of layout, it can speed up content loading and improve the user experience. The implementation is very simple: introduce a jQuery plugin into your existing theme and add just a few lines of code to enable infinite loading.
If your site contains a lot of content, continuously auto-loading the next page may confuse some users. It can also make it inconvenient when someone wants to reach the footer. In that case, after loading several pages automatically, we should switch to a manual loading method.
First, Include the jQuery Infinite Ajax Loader Plugin
Because we only want masonry-style infinite loading on certain pages, we only need to include this jQuery plugin on those specific pages. This helps avoid unnecessary performance impact on pages that do not need it. Infinite Ajax Loader is a commercial plugin, but it is free for personal and non-commercial use. The JavaScript include shown here is written directly into the template file. If you plan to distribute the theme you are building, it is better to use WordPress standard front-end asset loading methods. With WordPress conditional tags, you can achieve the same result in a cleaner way.
<script type="text/javascript" src="/js/jquery-ias.min.js"></script>Configure Infinite Ajax Loader to Enable Infinite Loading
The role of Infinite Ajax Loader is to turn standard pagination into Ajax-powered pagination, so the original page must already have pagination before you can use it. If it does not, you can install a WordPress pagination plugin first. If your theme already has pagination, place the following code at the bottom of the page, right before the </body> tag. The selectors used in the code need to match the HTML structure of your current theme.
jQuery(document).ready(function ($) {
var ias = jQuery.ias({
container: '#cases',
item: '.case-item',
pagination: '.pagination',
next: '.nextpostslink'
});
// 添加加载中图片
ias.extension(new IASSpinnerExtension());
// 自动加载3次之后，显示加载更多的按钮手动加载下一页
ias.extension(new IASTriggerExtension({
offset: 3,
text: '加载更多'
}));
// 加载完成后，显示没有更多了
ias.extension(new IASNoneLeftExtension({text: "暂时没有更多了"}));
});If everything works as expected, the code above will hide the default pagination, automatically load the second page as the visitor scrolls, and then show a Load More button after three pages have been loaded. Once all pages have been loaded, it will display a message indicating that there is no more content. By default, these messages appear as links and plain text, so you can adjust their styles to match the theme you are currently using.
If the page uses a Masonry layout, you also need to combine the solution with Masonry and the ImagesLoaded plugin to fine-tune the infinite loading behavior. For the exact implementation, refer to the official documentation. I will not go into more detail here.
