Automatic Load More Plugin For jQuery - ev-scroll-loader

Just another jQuery plugin for infinite scroll that automatically loads more content via AJAX as you scroll to the bottom of the content. Supports both desktop and mobile.

The plugin comes with a onScrolled handler that will be triggered when we have scrolled to the bottom of our content.

How to use it:

1. Include the latest jQuery JavaScript library and jQuery ev-scroll-loader plugin on the web page when needed.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="ev-scroll-loader.js"></script>

2. The basic usage.

$('.scrollMe').evScrollLoader({

  // height of scrollable container
  height: 500

  // CSS overflow-y Property
  scrollStyle: 'scroll',

  // callback
  onScrolled: function() {}
  
});

3. A full example.

<div class="contentWrap">
  <div class="content"></div>
</div>

(function($) {

  'use strict';

  var getLoader = function(max) {
      var count = 0;
      return function() {
          var $this = this;
          if (count === max) {
              $this.evScrollLoader('hideLoader');
              return $.Deferred().resolve();
          } else {
              ++count;
              return $.ajax({
                  url: 'demo.json',
                  dataType: 'json',
                  success: function(data, status, xhr) {
                      $.each(data.data, function(index, item) {
                          var $wrappedItem = $('<div class="item">' + item + '</div>');
                          $this.append($wrappedItem);
                          $wrappedItem.click(function() {
                              $this.evScrollLoader('scrollTo', $wrappedItem.offset().top);
                          });
                      });
                  }
              });
          }
      };
  };

  $(document).ready(function() {
      var $content = $('.content'),
          $contentWrap = $('.contentWrap'),
          resize = function() {
              $contentWrap.height($(window).height() * 0.8);
          };
      $(window).resize(resize);
      var heights = ['80%', 400, 800];
      $content.each(function(index, element) {
          var loader = getLoader(10);
          loader.apply($(element)).then(function() {
              $(element).evScrollLoader({
                  height: heights[index],
                  scrollStyle: 'overlay',
                  onScrolled: loader
              });
              resize();
          });
      });
  });

}(jQuery));

Changelog:

2021-04-29

• Dependency updated

---

This awesome jQuery plugin is developed by ensembleVideo. For more Advanced Usages, please check the demo page or visit the official website.