Press "Enter" to skip to content

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.

auto scroll down on page load jquery, load more jquery plugin, load more on scroll jquery, auto load more data on page scroll with jquery load data dynamically on page scroll using jquery ajax

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 Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.