如何加載和停止基於Ajax的垂直滾動功能+ gif圖像加載器

Question

我還沒有完全實現這一目標。 問題在於此功能只能工作一次然后停止。 我在這里錯過循環嗎？

我試圖將else { }塊移到else { }地方，但這無濟於事。 我也曾嘗試將條件設為else if (data=='')但這也無濟於事。

如果我移動此功能

if($(window).scrollTop() + $(window).height() > $("#load_data").height() && action == 'inactive') {

在if(data !=='')之外，即使從數據庫中獲取了最后一個原始if(data !=='') 我的滾動功能和gif圖像也不會停止 。

任何幫助，將不勝感激。 謝謝！

<script>
var limit = 20;
var start = 0;
var action = 'inactive';
var timeOutId;

function load_city_data(limit, start) {
    $.ajax({
        url:"ps_load_data.php",
        method:"POST",
        data:{limit:limit, start:start},
        cache:false,
        success:function(data) {
            $('#load_data').append(data);
            if(data !== '') {
                $('#imgLoader').html('<img class="animated-gif" src="img/ajax-loader.gif">');
                action = "inactive";
                $(window).scroll(function(){
                if($(window).scrollTop() + $(window).height() > $("#load_data").height() && action == 'inactive') {
                    action = 'active';
                    start = start + limit;
                    timeOutId = setTimeout(function(){
                        load_city_data(limit, start);
                    }, 1000);
                }
            else {
                $('#load_data_message').html('<div class="reached">You have reached at the end of the listings</div>');
                action = 'active'; 
                $(window).off('scroll');
                clearTimeout(timeOutId);
                $('img[src="img/ajax-loader.gif"]').remove();
            }
            });
            } 
        }
    });
}
$(document).ready(function(){
    if(action == 'inactive') {
        action = 'active';
        load_city_data(limit, start);
    }
});
</script>

Answer 1

使用exit(); 在while循環結束后立即執行。 即使您在ps_load_data.php中運行多個查詢，它也可以工作。

Answer 2

這里提到了答案： MySql獲取所有數據后如何停止滾動功能

另外，這是工作腳本

 $(document).ready(function(){
 var limit = 100;
 var start = 0;
 var action = 'inactive';
 function load_country_data(limit, start)
 {
  $.ajax({
   url:"ps_load_data.php",
   method:"POST",
   data:{limit:limit, start:start},
   cache:false,
   success:function(data)
   {
    $('#load_data').append(data);
    if(data == '')
    {
     $('#load_data_message').html("No Data Found");
     action = 'active';
    }
    else
    {
     $('#load_data_message').html("<img src='img/ajax-loader.gif'>");
     action = "inactive";
    }
   }
  });
 }
 if(action == 'inactive')
 {
  action = 'active';
  load_country_data(limit, start);
 }
 $(window).scroll(function(){
  if($(window).scrollTop() + $(window).height() > $("#load_data").height() && action == 'inactive')
  {
   action = 'active';
   start = start + limit;
   setTimeout(function(){
    load_country_data(limit, start);
   }, 2000);
  }
 });
});

只要確保您的url：“ ps_load_data.php”僅運行一個正在獲取的查詢 ，否則它將發生沖突，即使在獲取了最后一行數據后也可能不會隱藏/停止您的gif圖像。 謝謝！