روش ساخت صفحه های وب با امکان lazy loading ؟

سلام اتفاقا این موضوع بسیار مهمی است و دوستانی که کار کرده اند لطفا راهنمایی کنند.

با استفاده از دستور Jquery زیر زمانی که اسکرول به انتها برسد را متوجه خواهید شد :

 window.onscroll = function(ev) {
    if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
      alert("bottom!");
    }
};

حالا به جای alert میتونید کد AJAX بنویسید که بره به PHP بگه مثلا ادامه لیست رو بده ، برای اینکه ادامه لیست رو بگیرید باید در کئوری دیتابیس از Limit و index استفاده کنید و مشخص کنید از رکورد شماره چند به بعد و با چه تعدادی میخواید .
مثلا شما 10 تا آیتم رو اولین بار در صفحه دارید ، دفعه بعد میگید از آیتم 11 با Limit 10 رو بده در این شرایط سرور برای شما از خونه 11 تا 20 رو میگیره .
در نهایتم با کد append آیتم های چدید به به Div کانتنت اضافه میکنید.

سلام به دوستان عزیز

سورسی که برای این کار جواب گرفتم رو دراختیار دوستان می گذارم آرزوی موفقیت برای همه

<?
?>
<body>
<input type="text" style="display: none;width:100px;height: 50px" class="keyword" placeholder="جستجو" value="<?=$keyword?>" autocomplete="off">
<div id="paginationUpdate"></div>
<div id="noMoreQuestion" style="display: none;text-align: center;">
  <div style="color: #ffcc80;font-size: 14pt !important;line-height: 28pt !important;">کلیپ بیشتری برای نمایش نمی باشد.</div>
</div>
<div id="lazyloading-logo" style="display: none">
  <img src="/asset/images/empty/empty-profile/empty-profile-24.png">
</div>
</body>
<script>
  var count=12;
  var startIndex = 0;
  var canLoadMore = true;
  var loaderInprogress = false;
  $(function () {
    var keyword = $(".keyword").val();
    console.log(keyword);
    compelete_search(keyword);

  });
  var inProgress = false;

  $(window).scroll(function () {
    if ($(window).scrollTop() + $(window).height() > $('#paginationUpdate').height()) {
      if (!inProgress) {
        startIndex += 12;

        var keyword = $(".keyword").val();
        console.log(keyword);
        compelete_search(keyword);
      }
      inProgress = true;
      setTimeout(function () {
        inProgress = false;
      }, 300);
    }
  });
  function compelete_search(keyword) {
    var keyword = $(".keyword").val();
    if (!canLoadMore) {
      return;
    }

    if (loaderInprogress) {
      return;
    }

    loaderInprogress = true;
    $("#lazyloading-logo").show();
    $.ajax({
      url: '/menu/Complete_Search_ajax/',
      method: 'POST',
      dataType: 'json',
      data: {
        keyword:keyword,
        startIndex: startIndex,
        count: count
      },
      success: function (data) {
        loaderInprogress = false;
        if (data.status == true) {
      // $("#paginationUpdate").html(output.html);
          var $questionList = $("#paginationUpdate");
          var $questions = $(data.html);
          $questionList.append($questions);
        } else {
          canLoadMore = false;
          $("#noMoreQuestion").show();
          $("#lazyloading-logo").hide();
        }
      }
    });
  }

</script>