Load More Content As User Scrolls To The Bottom of the Content | ev-scroll-loader

Ensemble Video jQuery Scroll Loader Plugin to load more content as the user scrolls down the content area. Just another jQuery plugin for endless scrolling that automatically loads more content via AJAX as you scroll down the content. Supports both desktop and mobile.

How to make use of it:

1. Include the newest jQuery JavaScript library and jQuery ev-scroll-loader plugin on the internet web page when wanted.

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

2. The fundamental utilization.

$('.scrollMe').evScrollLoader({

  // height of scrollable container
  height: 500

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

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

3. A full instance.

<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));

Automatic Load More Plugin, Ensemble Video jQuery Scroll Loader Github, load data from server while scrolling using jquery ajax, jquery load more content when scroll to bottom, auto load content on page scroll


See Demo And Download

Official Website(ensembleVideo): Click Here

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

Share