jQuery - Lazy Loading Function w/ Scroll

Question

I have the a page loading 5 rows of results, and 5 more on click.

All I want to do is show the 5 more on scroll, like a lazy loader, instead of on click...thanks for any help.

$(function() {
  initShowMore();
  $("span#showMore a.moreResults").click(loadMoreResults);
});

function initShowMore() {
  var has_more = $("form#data input[name=has_more_results]").val();
  if (has_more) {
    $("table span#showMore").show();
  } else {
    $("table span#showMore").hide();
  }
}
function loadMoreResults() {
  if (loading) {
    return;
  }

  loading = true;

  var has_more = $("form#data input[name=has_more_results]").val();
  var page = parseInt($("form#data input[name=page]").val());

  var data = gatherQueryParams();
  data.page = page + 1;

  append = true; // global
  load(data);
}

meloncholy · Accepted Answer · 2011-11-23 03:59:39Z

2

You need to hook into the scroll event. From what I can tell, your situation is fairly simple (e.g. you don't want to load the results pertaining to a particular position on the page), so hopefully some fairly simple code will work. :)

I've added an if to see if the page has scrolled down far enough as you presumably will only want to trigger it after a certain point.

        $(document).scroll(function ()
        {
            if ($(document).scrollTop() > $(".someelement").position().top) loadMoreResults();
        });

answered Nov 23, 2011 at 3:59

meloncholy

2,20220 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery - Lazy Loading Function w/ Scroll

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related