当用户滚动到页面末尾时使用 jQuery .load()答案

【问题标题】：using jQuery .load() when user scrolls to the end of page当用户滚动到页面末尾时使用 jQuery .load()
【发布时间】：2012-05-26 16:45:31
【问题描述】：

当用户滚动到页面底部时，我正在使用 jQuery load() 加载更多内容。这是我的脚本。

$(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，甚至在加载完成之前。

问题是：

有没有办法在第一次执行后停止脚本..运行 load() ...然后重新启用该功能？当您想禁用过快的点击时，类似于取消绑定点击。

有什么想法吗？

【问题讨论】：

标签： javascript jquery

【解决方案1】：

加载完成后重新启用该功能如何？

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;
        });
    }
});

【讨论】：

【解决方案2】：

开始加载新页面后设置一个标志，并在页面更新后取消设置..

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;}
                  );
    }
});

需要注意的是，不只是多次出现的 div，你实际上是在发出多个 AJAX 请求..

【讨论】：

【解决方案3】：

试试这个

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
          });
       }
    }
});

【讨论】：

【解决方案4】：

这应该可以了，我还添加了 cmets 来帮助你：

$(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)
        });
    }
});

【讨论】：