[英]using jQuery .load() when user scrolls to the end of page
I am using jQuery load() to load more content when the user scrolls to bottom of page. 当用户滚动到页面底部时,我正在使用jQuery load()加载更多内容。 Here is my script. 这是我的剧本。
$(window).scroll(function () {
if ($(window).scrollTop() >= $(document).height() - $(window).height()) {
var visible_posts = $('.post').length - 1;
$(".posts").append('<div class="more-content-'+ visible_posts + '"></div>');
$(".more-content-" + visible_posts).html('<div class="loading"><img src="/img/loading.gif" alt="" />');
$(".more-content-" + visible_posts).load('<?php bloginfo('template_directory'); ?>/ajax/get_posts.php?offset=' + visible_posts);
}
});
The problem is this creates weird behaviour and many loading gifs if scrolling of user is too quick.. I think because it append the div with loading div every and each time condition is met even before load is done. 问题是,如果用户滚动速度太快,这会产生奇怪的行为,并且会产生许多加载gif。.我认为是因为它甚至在加载完成之前,每次满足条件时都会在div后面附加加载div。
Question is: 问题是:
Is there A way to Stop the script after the first execution .. Run load() ... then re-enable the function ? 有没有一种方法可以在第一次执行后停止脚本。运行load()...然后重新启用该函数? Something similar to unbind click when you want to disable too fast clicks. 当您想禁用太快的点击时,类似于解除绑定的点击。
Any idea? 任何想法?
How about re-enable the function after load is complete? 加载完成后重新启用该功能如何?
var canLoad = true;
$(window).scroll(function () {
if ($(window).scrollTop() >= $(document).height() - $(window).height() && canLoad) {
canLoad = false;
// other stuff
$(".more-content").load('stuff', function() {
// re-enable scroll function
canLoad = true;
});
}
});
Set a flag once you start loading the new page, and unset it once the page has been updated.. 一旦开始加载新页面,请设置一个标志,并在页面更新后将其取消设置。
var loadingMore = false;
$(window).scroll(function () {
if ( !loadingMore &&
$(window).scrollTop() >= $(document).height() - $(window).height()) {
loadingMore = true;
var visible_posts = $('.post').length - 1;
$(".posts").append('<div class="more-content-'+ visible_posts + '"></div>');
$(".more-content-" + visible_posts).html('<div class="loading"><img src="/img/loading.gif" alt="" />');
$(".more-content-" + visible_posts)
.load('<?php bloginfo('template_directory'); ?>/ajax/get_posts.php?offset=' + visible_posts,
function(){loadingMore = false;}
);
}
});
It is important to note, that it is not just the div that appears multiple times, you are actually making multiple AJAX requests.. 重要的是要注意,不仅是div多次出现,而且实际上是在发出多个AJAX请求。
try this 尝试这个
var flag = true;
$(window).scroll(function () {
if ($(window).scrollTop() >= $(document).height() - $(window).height()) {
if(flag){
flag = false;
var visible_posts = $('.post').length - 1;
$(".posts").append('<div class="more-content-'+ visible_posts + '"></div>');
$(".more-content-" + visible_posts).html('<div class="loading"><img src="/img/loading.gif" alt="" />');
$(".more-content-" + visible_posts).load('<?php bloginfo('template_directory'); ?>/ajax/get_posts.php?offset=' + visible_posts, function(){
flag = true
});
}
}
});
This should work, I've also added comments to help you: 这应该可行,我还添加了一些评论来帮助您:
$(window).scroll(function () {
var bload = 1; // Add a boolean var
if ($(window).scrollTop() >= $(document).height() - $(window).height() && bload) {
// Check in the condition to see if we load
bload = 0; // Set the boolean to false or zero, so that we don't load anything else until the var is true again
var visible_posts = $('.post').length - 1;
$(".posts").append('<div class="more-content-'+ visible_posts + '"></div>');
$(".more-content-" + visible_posts).html('<div class="loading"><img src="/img/loading.gif" alt="" />');
$(".more-content-" + visible_posts).load('<?php bloginfo('template_directory'); ?>/ajax/get_posts.php?offset=' + visible_posts, function () {
bload = 1; // This gets fired when the load is done, so we can load again (we set the bool to true)
});
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.