jQuery plugin: Scroll Loader


Overview

Load extra content when the user scrolls the window or an element towards the bottom. This is probably most useful when you want to use Ajax to load the extra content.

Syntax

$(element).scrollLoader(options);

Options

ratio (optional – default: .05): How close to the scrollbar is to the bottom of the element before triggering a load. Use ratio: 0 for absolute bottom.
Ratio = (total scroll height – current scroll position) / total scroll height.

loadContent (required): Function to execute when the scrollbar reaches the specified ratio.

Available Triggers

$(element).trigger("enableLoad"); // enables this plugin

$(element).trigger("disableLoad"); // disables this plugin

$(element).trigger("manualLoad"); // manually trigger the loadContent function

Example Usage

var offset = 2;
$(document).ready(function() {
  $(window).scrollLoader({
    loadContent: function() {
      $("#news_list").append("<li>Loading...</li>");
      // since this ajax call might take a while
      $(window).trigger("disableLoad");
      $.getJSON("/news/list?offset=" + offset++, function(data) {
        // remove the loading text
        $("#news_list li:last").remove();
        for (var i = 0; i < data.news.length; i++) {
          $("#news_list").append("<li>" + data.news[i].headline + "</li>");
        }
        // now that the ajax call is done, we can re-enable this
        $(window).trigger("enableLoad");
      });
    }
  });
});

Demo - scrollLoader bound to both the window and an element with overflow: auto
Download - jquery.scroll.loader.js


3 Comments

Rosie on Wednesday, October 28, 2009 (6:24AM)

Interesting.. what if you were do this with pictures? ;]

Millicent on Saturday, September 17, 2011 (10:12PM)

At last, someone comes up with the \”right\” anwesr!

Homam on Monday, October 21, 2013 (5:41AM)

hey man just stoped by to say 10k likes and 10k +1 for your nice plugin.
it helped me a lot, a total pain killer!