How to make use of it:

1. Load the wanted jQuery and jsrender JavaScript libraries within the doc.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/cdn/jsrender.min.js"></script>

2. Load the Load InfiniteScrollWithTemplate plugin.

<script src="jquery.infiniteScrollWithTemplate.js"></script>

3. Create a customized template for data rendering.

<script id="my-tmpl" type="text/x-jsrender">
  <p>{{:id}}. {{:title}}</p>
</script>

4. Create a container to which the brand new content is appended on the web page scroll.

<div id="result"></div>

5. Initialize the plugin and decide the info supply.

$("#result").infiniteTemplate({
  templateSelector: "#my-tmpl",
  dataPath: "data_sources.ajax",
  query: "word=ajax",
});

6. The information should return the AJAX response as follows.

{
  "data": [
      {
        "id": 1,
        "title": "Title 1"
      },
      {
        "id": 2,
        "title": "Title 2"
      },
      {
        "id": 3,
        "title": "Title 3"
      },
      // more data here
  ]
}

7. Enable a Load More button to load extra content instead of Page Scroll.

$("#result").infiniteTemplate({
  templateSelector: "#my-tmpl",
  dataPath: "data_sources.ajax",
  query: "word=ajax",
  loadSelector: $('#loadmore'),
});

8. More plugin choices with default values.

$("#result").infiniteTemplate({

  // POST, PUT, DELETE
  method: "GET",

  // Merge with json to load
  templateHelpers: null,

  // load on page load
  loadAtStart: true,

  // Load more data when the selector gets clicked
  loadSelector: null,

  // initial page
  initialPage: 1,

  // prevent cache
  preventCache: false,

});

9. Execute a callback function when there isn’t any consequence.

$("#result").infiniteTemplate({
  templateSelector: "#my-tmpl",
  dataPath: "data_sources.ajax",
  query: "word=ajax",
  zeroCallback: function () {
    alert("zero alert");
  },
});

AJAX-enabled Infinite Scroll With Template, jQuery Infinite With Template Plugin/Github, ajax load more on scroll

See Demo And Download