jQuery load content when scroll to bottom-100px of page, multiple events fired

Question

I want an event to load more content when a user is scrolling and reaches nearly the bottom of the page, say about 100px from the bottom, the problem is that the events get fired every single time you scroll in that lower 100px of the page, so that's an obvious issue that cannot happen, for obvious reasons, so I am wondering how I can do this best, I have checked out other answers/questions on here, however the one solution that partially works doesn't fit what I need it to do, and when i try to change it so it will, it completely freezes my browser every time. this is the question: Check if a user has scrolled to the bottom

The answer I'm looking at is near the bottom, but here is the code he suggests:

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
       $(window).unbind('scroll');
       alert("near bottom!");
   }
});

now like I said, this does work and prevents more than one event being fired, the problem is I need to have a endless amount of events fired, say i load 100 rows of information when you reach the bottom, but there are still 1500 more, i need it to repeat each time to load every amount of information (once you reach the bottom 100px part of the page each time)

so what I have tried to do is:

 function loadMore()
{
   alert("More loaded");
   $(window).bind('scroll');
 }

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
       $(window).unbind('scroll');
       loadMore();
   }
});

like I said, this freezes up my browser immediately every time, the binding part.

Related to previous question [using jQuery .load() when user scrolls to the end of page](http://stackoverflow.com/questions/10663985/using-jquery-load-when-user-scrolls-to-the-end-of-page) — rds, Feb 14 '13 at 14:27

JoeFletch · Accepted Answer · 2014-03-27T15:56:15.627

37

I was having this same problem too. I came across this link and it really helped (and worked)!

Update: I looked at the code and I think that when you rebind, you are missing the function to rebind to.

jsFiddle

 function loadMore()
{
   console.log("More loaded");
    $("body").append("<div>");
   $(window).bind('scroll', bindScroll);
 }

 function bindScroll(){
   if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
       $(window).unbind('scroll');
       loadMore();
   }
}

$(window).scroll(bindScroll);

edited Mar 27 '14 at 15:56

answered Nov 05 '12 at 17:56

JoeFletch

3,820
1
27
36

Hmm, that looks ok, but I'm not very sure about it, I don't like using timers and such unless it's absolutely necessary. There must be a better solution. – Dylan Cross Nov 05 '12 at 18:02
Yes, and that seems to work as it should in the fiddle, however I am trying to get it to work on my site itself, however the console keeps saying that $(window).scroll(bindScroll); has a Syntax error, being it's an illegal character. Which is messing up my entire site from loading correctly. (it is entirely loaded my ajax) – Dylan Cross Nov 05 '12 at 18:28
Update your question with more code from the `loadMore()` function. The problem should be in there somewhere. – JoeFletch Nov 05 '12 at 19:13
It's exactly what you have above in your code, I didn't change anything. It must be something in one of my javascript files interfering with it or something, I'm not quite sure, since it does work perfectly in your jsFiddle. – Dylan Cross Nov 05 '12 at 19:19
very useful, however if you press 'end' on the keyboard, it gets stuck to the bottom of the page and just keeps triggering loadMore. will find a solution and edit answer when I do – Horse May 01 '13 at 22:09
@Horse Did u find the solution here? I am getting more and more event firing here !!! And getting "SyntaxError: illegal character" on $(window).scroll(bindScroll); too. Please update your answer if you have fixed this issue. – Krutal Modi Feb 21 '14 at 05:30
Regarding the syntax error: there is a zero-width space character after the last semicolon in the code above (UTF e2 80 8b) which gets picked up when you copy and paste. Just delete the line and re-type, this fixes it. – Stephan Tittel Mar 27 '14 at 08:31
@StephanTittel, excellent catch. I have updated my answer to remove that character! I'm not sure how it got there in the first place! – JoeFletch Mar 27 '14 at 15:56

score 2 · Answer 2 · answered May 28 '13 at 12:49

This will help you.

<script type="text/javascript">
var sIndex = 11, offSet = 10, isPreviousEventComplete = true, isDataAvailable = true;

$(window).scroll(function () {
 if ($(document).height() - 50 <= $(window).scrollTop() + $(window).height()) {
  if (isPreviousEventComplete && isDataAvailable) {

    isPreviousEventComplete = false;
    $(".LoaderImage").css("display", "block");

    $.ajax({
      type: "GET",
      url: 'getMorePosts.ashx?startIndex=' + sIndex + '&offset=' + offSet + '',
      success: function (result) {
        $(".divContent").append(result);

        sIndex = sIndex + offSet;
        isPreviousEventComplete = true;

        if (result == '') //When data is not available
            isDataAvailable = false;

        $(".LoaderImage").css("display", "none");
      },
      error: function (error) {
          alert(error);
      }
    });

  }
 }
 });
 </script>

Go through this link for whole article and details how to fire multiple event.

load more content when browser scroll to end of page in jquery

score 0 · Answer 3 · answered Aug 19 '13 at 21:54

0

I had a same problem. To solve it, Im using underscore.js library to prevent multiple events from firing. Here is the link. http://underscorejs.org/#throttle

answered Aug 19 '13 at 21:54

Filix Mogilevsky

727
8
13

jQuery load content when scroll to bottom-100px of page, multiple events fired

3 Answers3

Linked