当用户滚动到页面末尾时使用jQuery .load() [英] using jQuery .load() when user scrolls to the end of page
问题描述
当用户滚动到页面底部时,我正在使用jQuery load()来加载更多内容。这是我的脚本。
I am using jQuery load() to load more content when the user scrolls to bottom of page. 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);
}
});
问题是,如果用户滚动太快,这会产生奇怪的行为和许多加载的GIF ...我想想因为它会在每次加载div时附加div加载div,即使在加载完成之前也满足条件。
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.
问题是:
有没有办法在第一次执行后停止脚本..运行load()...然后重新启用该功能?当你想要禁用太快的点击时,类似于解除绑定的东西。
Is there A way to Stop the script after the first execution .. Run load() ... then re-enable the function ? Something similar to unbind click when you want to disable too fast clicks.
任何想法?
推荐答案
如何在加载完成后重新启用该功能?
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;
});
}
});
这篇关于当用户滚动到页面末尾时使用jQuery .load()的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!