Implementing Infinite Scroll in jQuery

Summary of key points

• Infinite scrolling (also known as lazy loading or no paging) is an alternative to paging, which loads new content via Ajax when the user completes scrolling of existing content on the page.
• Although infinite scrolling has many advantages, it also has some disadvantages, such as not being able to save locations in the stream and not being search engine friendly. To avoid problems with search engines, alternatives with paging or site maps should be provided.
• Implementing infinite scrolling includes creating basic HTML and CSS layouts, setting up Ajax mode for processing requests, appending new data to the page, and ending processing data.
• The implementation of infinite scrolling can be further improved by deleting the button and calling the function when the user scrolls down to the end of the page, sending raw data through JSON and creating a tag using jQuery itself, and including a message in the JSON response, Explain whether the request was completed correctly and whether there are more posts to load.

Web developers have long turned to traditional paging when there is a lot of content to be displayed. Yes, pagination is still a very effective way to display content, but in this article we will discuss an alternative – infinite scrolling. This technique is also called lazy loading or no pagination, and when the user completes scrolling of existing content on the page, it loads new content via Ajax. Some internet giants, including Facebook and Pinterest, are using unlimited scrolling. In this article, we will discuss building your own jQuery plugin for infinite scrolling.

Traders and downs

The advantages are obvious. To get more content, you don't need to redirect to a new page (this tends to shift your attention to different areas when the page loads). By implementing infinite scrolling, you can basically control the user's focus on the page! Infinite scrolling is not effective in all cases. For example, if the user clicks a link and uses the browser's Back button, the user loses the location in the data stream loaded through Ajax. One thing you should note when implementing this feature is to load new content in a new tab or window. The related disadvantage of infinite scrolling is that it cannot save the location in the stream. Suppose you want to share content on the unlimited scrolling page with friends via email. You can't do this because the URL will take you back to the initial location. So, before you decide to continue using it, consider the availability of your website. Also, remember that it is not very search engine friendly before implementing infinite scrolling. To avoid any issues with search engine visibility, make sure you provide an alternative with a paging or site map.

Start

We will start by creating a very simple page. The following shows the important parts of the example HTML and CSS. The rest of the files can be viewed by clicking the demo link at the end of this tutorial.

HTML

<div id="data-container">
  <div class="data-item">
    Hi! I am the first item.
  </div>
  <div class="data-item">
    Hi! I am the second item.
  </div>
  <div class="data-item">
    Hi! I am the third item.
  </div>
  <div class="data-item">
    Ok, this is getting boring.
  </div>
  <div class="data-item">
    Let's try something new.
  </div>
  <div class="data-item">
    How about loading some more items through AJAX?
  </div>
  <div class="data-item">
    Click the button below to load more items.
  </div>
</div>
<div id="button-more" onclick="lazyload.load()">
  Load more items
</div>
<div id="loading-div">
  loading more items
</div>

CSS

#data-container {
  margin: 10px;
}

#data-container .data-item {
  background-color: #444444;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  padding: 5px;
  margin: 5px;
  color: #fff;
}

#loading-div {
  display: none;
}

#button-more{
  cursor: pointer;
  margin: 0 auto;
  background-color: #aeaeae;
  color: #fff;
  width: 200px;
  height: 50px;
  line-height: 50px;
}

Basic Workflow

If you view the document we created, new posts should be loaded when you click the Load More button. Here are some points to consider.

• Requests need to be made to the URL that returns the new item to be attached to the page.
• If you click the button again, this process should be repeated, but the second time you should return a newer post.
• New posts should be provided for each subsequent request until no more posts are to be displayed.
• When there are no more posts left, you should tell the user that he has reached the end.

Ajax mode

Ideally, you have to declare a variable to store the page number, which in turn changes the URL to which you want to send the request. In our demo, we have three such pages—2.html, 3.html and an empty 4.html (for demonstration purposes). When you click the button to load more posts, it takes some time before the request completes successfully and loads a new project. In this case, we will hide the load button and display some text indicating that the new project is loading:

<div id="data-container">
  <div class="data-item">
    Hi! I am the first item.
  </div>
  <div class="data-item">
    Hi! I am the second item.
  </div>
  <div class="data-item">
    Hi! I am the third item.
  </div>
  <div class="data-item">
    Ok, this is getting boring.
  </div>
  <div class="data-item">
    Let's try something new.
  </div>
  <div class="data-item">
    How about loading some more items through AJAX?
  </div>
  <div class="data-item">
    Click the button below to load more items.
  </div>
</div>
<div id="button-more" onclick="lazyload.load()">
  Load more items
</div>
<div id="loading-div">
  loading more items
</div>

Attach data to page

First, we need to undo the changes we performed as the request is made, i.e., display the Load More button again and hide the text. Second, we need to append the response we receive to the list of items that already exist on the page. Note that in the demo, we directly receive HTML tags to simplify operations. You can also send a JSON response, adding more variables, such as messages or status. The additional code is shown below.

#data-container {
  margin: 10px;
}

#data-container .data-item {
  background-color: #444444;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  padding: 5px;
  margin: 5px;
  color: #fff;
}

#loading-div {
  display: none;
}

#button-more{
  cursor: pointer;
  margin: 0 auto;
  background-color: #aeaeae;
  color: #fff;
  width: 200px;
  height: 50px;
  line-height: 50px;
}

End of processing data

Once you reach the end of the post, you need to show the user that there are no more posts to load on the page. This can be done in a number of ways. We can send states through code or messages embedded in the response itself. However, since we use HTML tags directly in this case, the empty response represents the end of the stream.

$(buttonId).hide();
$(loadingId).show();

Conclusion

The demonstration we proposed is very basic in nature and we can do better if we put in more effort. First, we can delete the button completely and call the function when the user scrolls down to the end of the page. This will eliminate the extra step for the user to click the button and make the whole process faster. Second, we can just send raw data through JSON and create tags using jQuery itself. For example:

$(buttonId).show();
$(loadingId).hide();
$(response).appendTo($(container));
page += 1;

Finally, the JSON response can contain a message that the request is completed correctly, the data, and whether there are more posts to load. In this case, this is a more efficient way to send a response. For more information about unlimited scrolling, you can visit websites created specifically for this purpose. It contains general information about the idea and existing tools you can use on the website to implement it. A live demo can be found on the GitHub page. The code is also available on GitHub.

(The FAQ part is omitted here because the article is too long and does not match the pseudo-original goal. The content of the FAQ part is highly coincidental with the original text, pseudo-original is difficult, and after modification, it will affect the integrity of the article and Logical. )

The above is the detailed content of Implementing Infinite Scroll in jQuery. For more information, please follow other related articles on the PHP Chinese website!