[英]jQuery Load More Data When Scroll Position at Bottom
I have jQuery Scroll Auto Load More. 我有jQuery Scroll Auto Load More。 The function is to load more data from database using PHP.
该功能是使用PHP从数据库加载更多数据。
The function is running OK, when I try to scroll then the next data will load. 该函数运行正常,当我尝试滚动时将加载下一个数据。 Until I facing problem, when I put the scroll to bottom then I refresh the page, the function is load but it always show double data.
直到遇到问题,当我将滚动条放到底部然后刷新页面时,该函数已加载,但始终显示双精度数据。
Here is my JS function so far: 到目前为止,这是我的JS函数:
$(document).ready(function()
{
$('#content').scrollPagination(
{
nop : 10,
id : 10,
offset : 0,
error : 'You have reached the end of the post.',
delay : 500,
scroll : true
});
});
(function($)
{
$.fn.scrollPagination = function(options)
{
var settings =
{
nop : 10, // The number of posts per scroll to be loaded
offset : 0, // Initial offset, begins at 0 in this case
error : 'No More Posts!',
delay : 500,
scroll : true
}
if(options)
{
$.extend(settings, options);
}
return this.each(function()
{
$this = $(this);
$settings = settings;
var offset = $settings.offset;
var busy = false;
if($settings.scroll == true) $initmessage = '';
else $initmessage = 'Click for more';
$this.append('<div class="content"></div><div class="loading-bar">'+$initmessage+'</div>');
$('.animation_images').show();
function getData()
{
$.post('load_post_user.php', {
action : 'scrollpagination',
number : $settings.nop,
offset : offset,
uid : '<?php echo $q_uid; ?>',
}, function(data) {
$this.find('.loading-bar').html($initmessage);
$('.animation_images').hide();
if(data == "") {
$this.find('.loading-bar').html($settings.error);
}
else {
offset = offset+$settings.nop;
$this.find('.content').append(data);
busy = false;
}
});
}
getData();
if($settings.scroll == true) {
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() > $this.height() && !busy) {
busy = true;
$('.animation_images').hide();
$this.find('.loading-bar').html('<img src="../assets/img/processing.gif"/>');
setTimeout(function() {
getData();
}, $settings.delay);
}
});
}
$this.find('.loading-bar').click(function() {
if(busy == false) {
busy = true;
getData();
}
});
});
}
})(jQuery);
As discussed in chat this is a problem with asynchronous calls and I answer here for the sake of completeness. 如聊天中所讨论的,这是异步调用的问题,为完整起见,我在这里回答。
The scripts contains an initial getData()
- call that initially fires for every element that scrollPagination
was called on when the script is loaded. 脚本包含一个初始的
getData()
-调用,该调用最初为加载脚本时调用了scrollPagination
每个元素触发。
getData
sets off an asynchronous "AJAX" - call to the backend with the given parameters, initially set to nop = 10
and offset = 0
. getData
引发一个异步“ AJAX”-使用给定的参数调用后端,该参数最初设置为nop = 10
且offset = 0
。
Right after this call, a scroll-handler to the window is bound. 在此调用之后,立即绑定到窗口的滚动处理程序。 It may be different from browser to browser, but this usually fires too when the page is fully loaded.
每种浏览器的浏览器可能有所不同,但是通常在页面完全加载时也会触发。
If the scrollposition is set to the bottom of the page, the if-clause in this handler is true while the initial AJAX-request is still being handled, and that is the problem here. 如果滚动位置设置为页面底部,则当仍在处理初始AJAX请求时,此处理程序中的if子句为true,这就是问题所在。
The offset is being set to the new correct value after this request returns successfully. 成功返回此请求后,将偏移量设置为新的正确值。 As the request did not return anything at the point the scroll-handler is fired the first time, it is still set to 0, resulting in the exact same request with a parameter of
&offset=0
sent with it and of course, returning the same results as the first request. 由于请求在第一次触发滚动处理程序时没有返回任何内容,因此它仍设置为0,从而导致与它一起发送参数
&offset=0
的完全相同的请求,当然,也返回相同的请求结果作为第一个请求。
This happens because the busy
bool isn't being set for the first call, so my recommended approach would be to set busy=true;
发生这种情况是因为没有为第一个呼叫设置
busy
布尔,所以我建议的方法是设置busy=true;
not before calling getData()
, but right at the start of this function. 不是在调用
getData()
之前,而是在此函数开始时。
function getData()
{
busy = true;
$.post('load_post_user.php', {
....
}
}
This will prevent a second request being sent in general when scrolling if another request is already being executed. 如果已经执行了另一个请求,则这将防止在滚动时一般发送第二个请求。
If you still want the second part of the content being loaded when initially having the scrollposition at the bottom of the page, you would need to introduce something like a initial
- flag; 如果你还想要的内容的第二部分初始具有在页面底部的scrollPosition当程序被加载,你就需要引入像一个
initial
-标志;
At the beginning of your initialization: 在初始化开始时:
return this.each(function()
{
$this = $(this);
$settings = settings;
var offset = $settings.offset;
var busy = false;
var initial = true; //set to true only this one time when initialising
....
and edit the check in your scroll-handler: 并在滚动处理程序中编辑支票:
if($settings.scroll == true) {
$(window).scroll(function() {
//only execute if either busy is false or initial is true
if($(window).scrollTop() + $(window).height() > $this.height() && (!busy || initial) {
if(initial && offset === 0){
// set correct offset for the second call
offset += $settings.nop;
}
initial = false; //set initial to false and not set it back to true anywhere else
....
This way the second scroll call will be executed nontheless but with the correct offset. 这样,尽管如此,第二个滚动调用仍将执行,但偏移量正确。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.