Edit in JSFiddle

$(function () {
  var fetching = false
  $('#loader').hide()

  $(window).scroll(function () {
    var theWindow = $(this);
    var theContainer = $('body');
    var tweak = 10;
    console.log('fetching:', fetching)

    if ((theWindow.scrollTop() >= theContainer.height() - theWindow.height() - tweak) && !fetching) {
      fetching = true
      $('#loader').show(1000, function () {
        $.get('/echo/json')
          .always(function (data) {
          $('#loader').hide()
          theContainer.append('<h1 class="tall">One More</h1><br />');
          fetching = false
        })
      })
    }
  });
});

<h1>One</h1>

<br />
<h1>Two</h1>

<br />
<h1>Three</h1>

<br />
<h1>Four</h1>

<br />
<h1>Five</h1>

<br />
<h1>Six</h1>

<br />
<h1>Seven</h1>

<br />
<h1>Eight</h1>

<br />
<h1>Nine</h1>

<br />
<h1>Ten</h1>

<br />
<div id="loader"></div>

#loader {
    position: fixed;
    bottom: 50vh;
    left: 40vw;
    background-color: green;
    height: 50px;
    width: 50px;
}
.tall {
    height: 500px;
    background-color: yellow;
}