How to implement a "Load More" button in JavaScript

Written by
Published on
Modified on
Category

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, 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.

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".

Comments

J
5/7/2021 9:39:08 PM
I assume the amount of data loaded would be based on the dataset created, right? It's not going to load infinitely? -Jared
Walter
5/12/2021 7:28:33 PM
That would be correct! In a real world scenario the dataset would be data loaded through some kind of web service. And if no data is returned, then you could get rid of the 'load more' button.

Developer Poll

Q:

Add a comment

Send me your weekly newsletter filled with awesome ideas
Post