[英]How to load and stop Ajax based vertical scroll function + gif image loader
I have not been able to fully achieve this. 我还没有完全实现这一目标。 The problem is this function works once and then stops.
问题在于此功能只能工作一次然后停止。 Am I missing a loop here?
我在这里错过循环吗?
I have tried to move the else { }
block everywhere, but it doesn't help. 我试图将
else { }
块移到else { }
地方,但这无济于事。 I have also tried to put the condition else if (data=='')
but that also didn't helped. 我也曾尝试将条件设为
else if (data=='')
但这也无济于事。
If I move this function 如果我移动此功能
if($(window).scrollTop() + $(window).height() > $("#load_data").height() && action == 'inactive') {
outside of if(data !=='')
then my scroll function and the gif image doesn't stops even after the last raw been fetched from the database. 在
if(data !=='')
之外,即使从数据库中获取了最后一个原始if(data !=='')
我的滚动功能和gif图像也不会停止 。
Any help would be appreciated. 任何帮助,将不胜感激。 Thanks!
谢谢!
<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>
Use exit();
使用
exit();
immediately after while loop ending. 在while循环结束后立即执行。 It can work even if you're running multiple queries in your ps_load_data.php .
即使您在ps_load_data.php中运行多个查询,它也可以工作。
The answer is mentioned here: How to stop my scroll function once MySql has fetched all the data 这里提到了答案: MySql获取所有数据后如何停止滚动功能
Also, this is the working script 另外,这是工作脚本
$(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);
}
});
});
Just make sure your url:"ps_load_data.php" has only one fetching query running , otherwise it will conflict and might not hide/stop your gif image even after last row of data has been fetched. 只要确保您的url:“ ps_load_data.php”仅运行一个正在获取的查询 ,否则它将发生冲突,即使在获取了最后一行数据后也可能不会隐藏/停止您的gif图像。 Thanks!
谢谢!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.