In web development, “load more” functionality refers to a user interface pattern that allows users to retrieve additional content without navigating to a new page or refreshing the current page.
It is typically used to initially display a limited number of items such as articles, products, or comments, and provides a button or link that, when clicked, fetches and displays more items.
Table of Contents
Why do we need more functionality of load?
1. Enhanced User Experience:
The main goal of the “load more” feature’s implementation was to enhance user experience.
A web page that has a lot of content, such as articles, products, photographs, or comments, may take longer to load and provide a worse user experience.
Using “load more” allows your prominent content to stock in a smaller, more manageable domain, reducing initial load times and increasing the responsiveness of page breaks.
2. Faster Initial Page Load:
When a web page needs to show a lot of content, loading everything at once may prolong the time it takes for the page to load and become functional.
When “drive more” is used, only a portion of the content is first loaded, which speeds up the initial page load. Even before all things have been removed from the device, users might start interacting with the content.
3. Better Mobile Experience:
Due to their smaller screens, mobile devices might cause librarians’ eyes to become weary of long word lists. The text is accessible to the “load more” token without any additional information. Because it enables them to manage a lot of information at once, this characteristic is particularly beneficial for mobile design.
4. Bounce Rate Reduction:
The bamboo rate focuses on the portion of visitors who abandon a website after only seeing one page. A high bounce certificate could mean that searchers are not finding the website or that the lengthy page load time is deterring additional searches.
Implementing “load more” will encourage graduates to request additional content, which will lower the bounce rate.
5. Optimum Performance:
The server may be under pressure and website performance may be slowed when web pages grow too large as a result of loading many objects at once.
You may distribute server load more evenly as users stream content by using the “load more” command. This strain on the server keeps things running well for all grades.
The “load more” option is useful for how the content is presented, how the user interacts with it, and how fast the website loads
To ensure that people may explore and enjoy the material on your website without experiencing the inconveniences of slow loading times and overpowering displays, you should gradually load content in smaller batches.
Learn Infinite Scroll In JavaScript
How to Achieve Load More Functionality in JavaScript: Step-by-Step
Here’s a basic step-by-step guide on how to implement a simple load more functionality using JavaScript:
1. HTML Structure:
<div id="blogContainer">
<!-- Blog posts will be dynamically added here -->
<div class="blog_post">Blog Post 1</div>
<div class="blog_post">Blog Post 2</div>
<div class="blog_post">Blog Post 3</div>
<div class="blog_post">Blog Post 4</div>
<div class="blog_post">Blog Post 5</div>
<div class="blog_post">Blog Post 6</div>
<div class="blog_post">Blog Post 7</div>
<div class="blog_post">Blog Post 8</div>
<!-- ... more blog posts -->
</div>
<button id="loadMoreBtn">Load More</button>2. JavaScript:
In this section, the JavaScript code begins by obtaining references to the “blogContainer” and “loadMoreBtn” elements from the HTML using document.getElementById().
It also sets the number of posts to display per page using posts per page, which is initially set to 4. Variable Visible Posts keep track of how many posts are currently visible.
const blogContainer = document.getElementById("blogContainer");
const loadMoreBtn = document.getElementById("loadMoreBtn");
const postsPerPage = 4;
let visiblePosts = postsPerPage;
The load more function is responsible for displaying additional blog posts when the “load more” button is clicked.
It first selects all elements with the class “blog-post” and stores them in the blog post variable.
Then, it iterates over the next set of posts based on visible posts and posts per page. If there are no more posts to display, it hides the “Load more” button. The function updates the visible post count and checks if all posts have been displayed to hide the button.
function loadMore() {
const blogPosts = document.querySelectorAll(".blog-post");
for (let i = visiblePosts; i < visiblePosts + postsPerPage; i++) {
if (i >= blogPosts.length) {
loadMoreBtn.style.display = "none";
break;
}
blogPosts[i].style.display = "block";
}
visiblePosts += postsPerPage;
// Check if there are remaining posts to show
if (visiblePosts >= blogPosts.length) {
loadMoreBtn.style.display = "none";
}
}This line will listen to the event of JavaScript. The load more feature is activated when the button is clicked, displaying more blog content.
loadMoreBtn.addEventListener("click", loadMore);This piece of code initializes the visibility of the blog post. This hides all blog posts that are beyond the initial visible posts (as defined by visible posts) by setting their display style to “none”.
const blogPosts = document.querySelectorAll(".blog-post");
for (let i = visiblePosts; i < blogPosts.length; i++) {
blogPosts[i].style.display = "none";
}This part checks to see if there are any last posts that need to load first. The “Load more” button is hidden when all of the blog posts are shown.
if (blogPosts.length <= visiblePosts) {
loadMoreBtn.style.display = "none";
}Final and complete code of the JavaScript code
const blogContainer = document.getElementById("blogContainer");
const loadMoreBtn = document.getElementById("loadMoreBtn");
const postsPerPage = 4;
let visiblePosts = postsPerPage;
function loadMore() {
const blogPosts = document.querySelectorAll(".blog-post");
for (let i = visiblePosts; i < visiblePosts + postsPerPage; i++) {
if (i >= blogPosts.length) {
loadMoreBtn.style.display = "none";
break;
}
blogPosts[i].style.display = "block";
}
visiblePosts += postsPerPage;
// Check if there are remaining posts to show
if (visiblePosts >= blogPosts.length) {
loadMoreBtn.style.display = "none";
}
}
loadMoreBtn.addEventListener("click", loadMore);
// Initially hide extra posts
const blogPosts = document.querySelectorAll(".blog-post");
for (let i = visiblePosts; i < blogPosts.length; i++) {
blogPosts[i].style.display = "none";
}
if (blogPosts.length <= visiblePosts) {
loadMoreBtn.style.display = "none";
}