Load more dynamic website content while Scroll down

This loads dynamic content while scroll down using javascript and ajax post. Its very simple to implement the website and jquery mobile application also Below is the sample code that pop up an message when user reaches end of the page.

 <script>
    $(window).scroll(function () {
        if ($(document).height() <= $(window).scrollTop() + $(window).height()) {
            alert("End Of The Page");
        }
    });</script>

Steps:
User scroll down the page and reached to end of the page.
Scroll end event fire.
Show loader image and make an ajax request to the server (call handler or WCF Services or Rest Services ).
Get the response and append the data to data container and hide loader image.

 <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>