Infinite loading, also referred to as infinite scrolling, is a popular UI/UX technique in which a user does not have to leave the page in order to load more content, or more specifically in order to traverse through different pages of content. But it does have it's issues. For one, it takes control away from the user when it comes to loading data. You can read more about the many challenges that come with infinite scrolling in this article here.
Which is why a "load more" button might make more sense most of the time.
There are various ways of loading more data in JavaScript, including:
- Retrieving HTML from a web service or API
- Retrieving a JSON response from a web request and loading a template
- Retrieving a JSON response from a web request and building the HTML in JavaScript
In this article I will cover the 2nd and 3rd options as they are the most commonly found online these days. While you can return large chunks of HTML from a server, it takes away the ability for a front-end developer to change the layout in any way.
Before we start though, if you are relatively new to JavaScript, then I recommend Web Design with HTML, CSS, JavaScript and jQuery as a good set of books and a good starting point. It covers the basics for anyone starting out and it looks great while doing it.
So let's get started by creating a sample data set that we can use as our data feed.
1. Create a dataset
As mentioned, this data would typically come from a web request made to your server (or a 3rd party server) which would then come from your database. In this case, let's assume that you are loading data from a web service and that the resulting JSON response looks something like the following each time a user "loads more":
let dataset = [
{
title: 'Article 1',
id: 1
},
{
title: 'Article 1',
id: 1
},
{
title: 'Article 1',
id: 1
},
{
title: 'Article 1',
id: 1
}
];
You can consider that array of data to be a single 'page' of content in a feed. Each time that you make a new request to 'load more', the server should return the next batch of data to load. And to read more about the importance of client-side pagination versus server-side pagination, you can check out the article here.
Once you have retrieved your dataset, you can use the following HTML template to create the elements onto the actual webpage.
2. Create the template
To keep things simple, we can use an HTML <template> that will contain placeholders only for the data that we will replace, mainly the title of each article for now.
<template id='template'>
<div class='item'>
{{title}}
</div>
</template>
The template will represent each item in the feed, and the handlebar style {{title}} will be the placeholder for the actual data that is being rendered. We will replace these handlebars with the actual data in the dataset.
For this guide, assume that the dataset variable will be updated with new data on each click of the 'load more' button. The page itself can be laid out like the following:
<html>
<head></head>
<body>
<div id='items' class='items'></div>
<div><a href="javascript:void(0)" class="btn" onclick="loadData()">Load more</a></div>
<template id='template'>
<div class="item-image">
<img src="https://www.thatsoftwaredude.com/images/collections/e2bf959c-914b-45c0-8f16-b869e923f674.png">
</div>
<div class="item-title">{{title}}</div>
</template>
</body>
</html>
Now we just need to load the data into the template and then append the resulting element to the items <div> above.
3. Load data
The following function will load the given dataset onto the page.
function loadData(){
let template = document.getElementById('template');
dataset.forEach(function(item){
// create a new element with the contents of the template
let div = document.createElement('div');
div.className = 'item';
div.innerHTML = template.innerHTML.replace('{{title}}', item.title);
document.getElementById('items').appendChild(div);
});
}
The first thing that we do is retrieve the template itself from the DOM and save it in a temporary variable. We will need the original untouched markup each time we load a new item.
We will then iterate through the dataset collection and create a new div for each item. We can set the innerHTML of each div to the template's innerHTML and then replace any placeholders that we may have with the actual data.
And lastly, we append the resulting div element to a parent on the page.
4. CSS
Here is some sample CSS that you can use for testing purposes.
.items .item{
background:#f3f3f3;
padding: 20px;
border-radius: 10px;
border:solid 1px #aaa;
display:inline-block;
width: 31%;
margin:1%;
}
.items .item .item-title{
font-size: 20pt;
font-weight:bold;
letter-spacing: -1px;
}
.items .item .item-image{
width: 100%;
}
4. Example
And here is a running example of what this will look like.
In this example, I am loading the same dataset over and over again. In a real-world case however, you would ideally pull each page of data from a web request as mentioned above.
And there you have it folks. For the most part, this is a very fundamental implementation that you can add your own design and logic too. But it's a great starting point for anyone looking to implement "load more".
{{title}}