Question

我无法完全实现这一目标。问题是这个功能工作一次然后停止。我在这里错过了一个循环吗？

我试图在任何地方移动else { }块，但它没有帮助。我也尝试过条件else if (data=='')，但这也没有帮助。

如果我移动此功能

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

在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

在while循环结束后立即使用exit();。即使您在 ps_load_data.php 中运行多个查询，它也可以正常工作。

Answer 2

答案在这里提到：How to stop my scroll function once MySql has fetched all the data

此外，这是工作脚本

 $(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);
  }
 });
});

请确保您的网址：“ps_load_data.php”只有一个提取查询正在运行，否则即使在获取了最后一行数据后它也会发生冲突并且可能无法隐藏/停止您的gif图像。谢谢！

如何加载和停止基于Ajax的垂直滚动函数+ gif图像加载器

2 个答案: