我正在使用jQuery Waypoints插件在用户到达页面底部时触发某些内容。一旦用户到达页面底部，就会触发AJAX调用并获得JSON响应。一旦完成，页面大小就会增加，这意味着我们不再处于页面底部（东西被添加到页面中），但是，Waypoints插件仍然会重复该AJAX调用两次或三次，即使底部也是如此页面不再存在，它远远低于......
这是我正在努力解决的问题。我已经尝试了很多想法，但都没有效果。这是我使用Waypoints插件的方式：
var pop_loader = $('<br /><div class="loading row" style="display: none;"><div class="col-lg-12 center">' +
generate_preloader(32, 3) + '</div></div><br />');
var pop_footer = $('.last-box-popular');
var pop_start = { from: 24 };
var pop_opts = { offset: '100%' };
pop_footer.waypoint(function(event, direction) {
var $boxCount = document.getElementsByClassName('image');
if ($boxCount.length < 24){
return false;
}
pop_footer.waypoint('destroy');
$('.loadMore').append(pop_loader);
$('.loading').fadeIn('slow');
delay('pop', function(){
$.ajax({
type: 'GET',
url: 'image.php?action=fetchMore&start=' + pop_start.from,
success: function(data){
try {
var response = $.parseJSON(data);
} catch (e) {
display_alert(lang.L_TPL_AJAX_CATCH, 'danger', 3000, 'top');
return false;
}
if ('error' in response || $.isEmptyObject(response.images)) {
pop_loader.hide();
return false;
}
pop_start.from += 24;
pop_loader.detach();
pop_footer.waypoint(pop_opts);
// Remove previous last class
$('.image').removeClass('last-box-popular');
var imagesLength = response.images.length - 1;
for (var key in response.images)
{
var image = response.images[key];
var imageHTML = '<span class="image' + ((imagesLength == key) ? ' last-box-popular' : '') + '">';
imageHTML += '<div class="topleft-corner">';
imageHTML += '<div class="dropdown">';
imageHTML += '<span class="icon-share dropdown-toggle" id="share-dropdown" data-toggle="dropdown"></span>';
imageHTML += '<ul class="dropdown-menu share-dropdown" role="menu" aria-labelledby="share-dropdown">';
imageHTML += '<li role="presentation">';
imageHTML += '<a href="' + generate_site_url() + 'store/t/' + image.image_name + '.' + image.image_extension + '" class="facebook_share" href="#" role="menuitem" tabindex="-1">';
imageHTML += '<span class="icon-facebook-circled-2"></span> Facebook';
imageHTML += '</a>';
imageHTML += '</li>';
imageHTML += '<li role="presentation">';
imageHTML += '<a href="http://twitter.com/share?url=' + generate_site_url() + 'store/t/' + image.image_name + '.' + image.image_extension + '&text=Shared via @IMGzer - " class="twitter_share" role="menuitem" tabindex="-1">';
imageHTML += '<span class="icon-twitter"></span> Twitter';
imageHTML += '</a>';
imageHTML += '</li>';
imageHTML += '<li role="presentation">';
imageHTML += '<a href="https://plus.google.com/share?url=' + generate_site_url() + 'store/t/' + image.image_name + '.' + image.image_extension + '" class="google_share" role="menuitem" tabindex="-1" href="#">';
imageHTML += '<span class="icon-gplus-circled-1"></span> Google+';
imageHTML += '</a>';
imageHTML += '</li>';
imageHTML += '</ul>';
imageHTML += '</div>';
imageHTML += '</div>';
imageHTML += '<div class="topright-corner">';
imageHTML += '<span class="glyphicon glyphicon-minus-sign" title="Report" data-placement="left" data-toggle="modal" data-target="#report" data-report="image" data-reference="' + image.image_name + '"></span>';
imageHTML += '</div>';
imageHTML += '<section class="row">';
imageHTML += '<div class="col-lg-12 center upload-output">';
imageHTML += '<br /><br />';
imageHTML += '<div class="img-container">';
imageHTML += '<div class="helper"></div>';
imageHTML += '<a href="' + generate_site_url() + 'image/' + image.image_name + '">';
imageHTML += '<img src="' + generate_site_url() + 'store/t/' + image.image_name + '.' + image.image_extension + '" class="img-thumbnail">';
imageHTML += '</a>';
imageHTML += '</div>';
imageHTML += '<br />';
imageHTML += '<span class="small">Uploaded ' + image.upload_time + ' by <strong>' + ((image.username == null || image.username == '') ? 'a guest' : '<a href="' + generate_site_url() + 'user/' + image.username + '">' + image.username + '</a>') + '</strong></span>';
imageHTML += '<br />';
imageHTML += '<span class="label label-success"><span class="glyphicon glyphicon-thumbs-up"></span> ' + image.image_likes + '</span> ';
imageHTML += '<span class="label label-danger"><span class="glyphicon glyphicon-thumbs-down"></span> ' + image.image_dislikes + '</span> ';
imageHTML += '<span class="label label-warning"><span class="glyphicon glyphicon-heart"></span> ' + image.image_favorited + '</span>';
imageHTML += '</div>';
imageHTML += '</section>';
imageHTML += '</span> ';
$('.images').append(imageHTML);
$('.image').slideDown('fast');
}
}
});
}, average_ajax_delay);
}, pop_opts); // Popular
如何使Waypoints插件在到达底部时进行一次AJAX调用。然后在达到“新”底部时再进行一次AJAX调用。
如果还有其他方法可以让这个问题更清楚，请告诉我。
答案 0 :(得分：3)
在插入新的DOM元素后，尝试$.waypoints('refresh');，而不是解除绑定然后重新绑定路点。
但是，也可能是滚动事件正在触发多个ajax调用，这些调用会使事情起作用。因此，您可能需要throttle该函数以在响应请求之前阻止多次调用。
答案 1 :(得分：2)
相反，我创建了一个更优雅的解决方案，我在页面的最底部放置了一个页脚元素。 您可以使用css将其隐藏起来：
.footer{opacity:1;visibibility:hidden}
你应该避免隐藏它，因为它不会被插件检测到：
以下是完整示例：http://jsfiddle.net/f3YZ2/108/
答案 2 :(得分：1)
创建航点时，将triggerOnce: true作为选项传递。在success方法中，当您向DOM渲染其他元素时，请添加新的航点。
答案 3 :(得分：1)
看起来你试图实现无限滚动，所以为什么不使用jQuery Waypoints的无限滚动方法：http://imakewebthings.com/jquery-waypoints/shortcuts/infinite-scroll/
当然，您的服务器端实施必须改变，但好处是“禁用JavaScript的用户仍然可以使用更多链接。
答案 4 :(得分：1)
我以前做过这类事。我的方式是，我将路标不是通过ajax添加的最后一个元素（让我们称之为 ajax项），而是连接到始终位于最后下方的DOM中的元素ajax item （我们称之为加载更多）。所以你向下滚动，航点点击加载更多，加载新内容，这会推动加载更多。因此，您可以再次滚动并再次点击加载并触发ajax。为我工作得很好。
一些提示： 1）在触发ajax呼叫之前，您需要检查方向是否已关闭。 2）单击后退按钮并转到页面时，可能会在页面加载时触发航点。如果您需要阻止此操作，请在触发ajax调用之前检查scroll事件。如果之前页面上有任何滚动，请注意浏览器将自动触发滚动事件，因此您只能在第二个和后来的滚动事件上触发waypoint / ajax。
简单的代码示例（我使用的是jQuery，但你会得到这个想法）;
$('.load-more').waypoint(function(direction) {
if (direction === 'down' && content.o.scroll > 1) {
// Do your stuff here
}
}, {offset: '170%'});
$(window).on('scroll', function () {
content.o.scroll++;
});