[英]jQuery Load More Data When Scroll Position at Bottom
我有jQuery Scroll Auto Load More。 该功能是使用PHP从数据库加载更多数据。
该函数运行正常,当我尝试滚动时将加载下一个数据。 直到遇到问题,当我将滚动条放到底部然后刷新页面时,该函数已加载,但始终显示双精度数据。
到目前为止,这是我的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);
如聊天中所讨论的,这是异步调用的问题,为完整起见,我在这里回答。
脚本包含一个初始的getData()
-调用,该调用最初为加载脚本时调用了scrollPagination
每个元素触发。
getData
引发一个异步“ AJAX”-使用给定的参数调用后端,该参数最初设置为nop = 10
且offset = 0
。
在此调用之后,立即绑定到窗口的滚动处理程序。 每种浏览器的浏览器可能有所不同,但是通常在页面完全加载时也会触发。
如果滚动位置设置为页面底部,则当仍在处理初始AJAX请求时,此处理程序中的if子句为true,这就是问题所在。
成功返回此请求后,将偏移量设置为新的正确值。 由于请求在第一次触发滚动处理程序时没有返回任何内容,因此它仍设置为0,从而导致与它一起发送参数&offset=0
的完全相同的请求,当然,也返回相同的请求结果作为第一个请求。
发生这种情况是因为没有为第一个呼叫设置busy
布尔,所以我建议的方法是设置busy=true;
不是在调用getData()
之前,而是在此函数开始时。
function getData()
{
busy = true;
$.post('load_post_user.php', {
....
}
}
如果已经执行了另一个请求,则这将防止在滚动时一般发送第二个请求。
如果你还想要的内容的第二部分初始具有在页面底部的scrollPosition当程序被加载,你就需要引入像一个initial
-标志;
在初始化开始时:
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
....
并在滚动处理程序中编辑支票:
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
....
这样,尽管如此,第二个滚动调用仍将执行,但偏移量正确。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.