Two page content load with jQuery Infinite scroll script (when only one load required)

Question

I'm writing a little jQuery script for my tumblr page, that emulates infinite scroll loading via jQuery.get() the content that I want from the next pages of the site (it's a tumblr site, so the pagination is OK).
I know that there are some infinite scroll plugins, but all I tried not working for me and, besides, are pretty fatty. I don't need all that funcionality. The script loads the new elements that I want, yes, but the problem is that loads the content from two pages every time. And, obviously, it should load instead only a single page content.

The jQuery is:

    $(document).ready(function() {
      "use strict";
      var nextPage = 2;
      var totalPages = {TotalPages};
      var url = '/page/'; // base url
      $(document).on('scroll', function() {
        if (nextPage <= totalPages) { // if exist new pages
          if ($(window).scrollTop()== $(document).height() - $(window).height()) { // when reach the page bottom
            $.get(url + nextPage, function(data){ // get the next page
              $(data).find(".post").appendTo(".posts"); // filter content we want and append it to the actual page element
              picturefill(); // reload picturefill,making the new images responsive
            });
            nextPage++; // increment nextpage counter
          };
        } else { // exit if no more pages
          return;
        }
      });
    });

And the content that it loads is:

<div class="posts">
<article class="photo-container post" id="{PostID}" data-reblog="{ReblogURL}">
    <div class=" picturefill" data-picture data-alt="" data-class="photo">
        <div class="picturefill" data-src="{PhotoURL-HighRes}" ></div>
        <div class="picturefill" data-src="{PhotoURL-500}" data-media="(max-width: 568px)"></div>
        <div class="picturefill" data-src="{PhotoURL-250}" data-media="(max-width: 250px)"></div>
        <img alt="" class="photo" src="http://img.jpg"> <!-- generated by picturefill -->
        <noscript><img class="photo" src="{PhotoURL-HighRes}" alt=""></noscript>
    </div>
    <!-- MORE CODE -->
</article>

I use Picturefill for responsive images and that works well. Anybody have a idea? Thanks.

the `scroll` event may be fired multiple times, causing the Ajax `$.get()` to also get triggered multiple times. you should add a variable to prevent yourself from fetching another page until the current Ajax request is complete. Also, you should do the increment `nextPage++` *inside* the Ajax callback. — Felix, Feb 13 '13 at 13:05
Oh. Thanks @FelixBonkoski . I see your comment now. I came to the same solution last night. It was pretty late, so I think to update this today (begin to writing it before lunch and complete now, no refresing, sorry). I will change the increment position like you wisely suggested. Many many thanks for the answer :D — juanriqgon, Feb 13 '13 at 15:22

score 1 · Answer 1 · edited Mar 20 '17 at 09:43

(Answered in a question edit. Converted to a community wiki answer. See What is the appropriate action when the answer to a question is added to the question itself? )

The OP wrote:

I solved my problem using a control variable, lastLoadingPos that stores the last position (relative to the document) where the script inserted page content. If that position doesn't changes, no insertion will be done. That is because the multiple content insertion happens because the script detects that the bottom of the page has been reached more than one time at the same position. Yeah, this solved the problem, but it's not elegant not the proper solution, I think. Just a workaround. If somebody have any idea it will be well received :D

My workaround (of course, I still need to add a thing or two):
$(document).ready(function() {
  "use strict";
  var nextPage = 2;
  var lastLoadingPos = 0; // stores last insertion position (document related)
  var totalPages = {TotalPages};
  var url = '/page/'; // base url
  $(document).on('scroll', function() {
    if (nextPage <= totalPages) { // if exist new pages
      var top = $(window).scrollTop();
      if ((lastLoadingPos != top) && (top== $(document).height() - $(window).height())) { // when current bottom position reached first time
        lastLoadingPos = top; // new last insertion position
        $.get(url + nextPage, function(data){ // get the next page
          $(data).find(".post").appendTo(".posts");  // filter wanted content
          picturefill(); // reload picturefill, making new images responsive
          nextPage++; // increment nextpage counter
        });
      }
    } else { // exit if no more pages
      return;
    }
  });
});  

Two page content load with jQuery Infinite scroll script (when only one load required)

1 Answers1