Press "Enter" to skip to content

JQuery Plugin That Enables Infinite Scrolling With AJAX | infinityScroll.js

infinityScroll.js is a very simple infinity scroll extension that loads more data while the user scrolls down and displays a custom message after all the content is displayed.

infinite scroll jquery, jquery infinite scroll pagination, jquery infinite scroll ajax, infinite scrolling javascript, infinite scroll vanilla js, infinite scroll example

How to make use of it:

1. Include the stylesheet infinityScroll.css and JavaScript infinityScroll.js on the page.

<link rel="stylesheet" href="/path/to/dist/infinityScroll.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/dist/infinityScroll.min.js"></script>

2. Create a container element in which to present the data.

<div id="element"></div>

3. Select your content to be displayed on the page when you scroll down. It can be HTML, JSON, XML, etc.

<!-- data.html -->
<div class="is-load-list">
  <img src="1.jpg" alt="">
  <p>Content 1</p>
</div>
<div class="is-load-list">
  <img src="2.jpg" alt="">
  <p>Content 2</p>
</div>
<div class="is-load-list">
  <img src="3.jpg" alt="">
  <p>Content 3</p>
</div>
...

4. Configure the infinityScroll plugin.

$('#element').infinityScroll({
  type : "html",
  data : "load.html",
  loadListClass : "is-load-list",
})

5. Specify the number of items to load in the init.

$('#element').infinityScroll({
  type : "html",
  data : "load.html",
  loadListClass : "is-load-list",
  renderInit : 2
})

6. Customize the message to display after the last items have been submitted.

$('#element').infinityScroll({
  type : "html",
  data : "load.html",
  loadListClass : "is-load-list",
  scrollEndMessage : "read all contents!",
})

Easy Infinite Scroll With jQuery And AJAX, infinityScroll.js Plugin/Github, infinite scroll load more button jquery


See Demo And Download

Official Website(kosukenemy): Click Here

This superior jQuery/javascript plugin is developed by kosukenemy. For extra Advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.