1

ユーザーがページの一番下までスクロールしたときに、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（）を実行して...次に関数を再度有効にしますか？速すぎるクリックを無効にする場合は、クリックのバインドを解除するのと似ています。

何か案が？

4

4 に答える 4

2

ロードが完了した後、機能を再度有効にするのはどうですか？

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;
        });
    }
});
于 2012-05-19T09:33:51.087 に答える
1

新しいページの読み込みを開始したらフラグを設定し、ページが更新されたらフラグを解除します。

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リクエストを作成していることに注意してください。

于 2012-05-19T09:35:06.257 に答える
0

これを試して

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
          });
       }
    }
});
于 2012-05-19T09:36:32.513 に答える
-1

これはうまくいくはずです、私はあなたを助けるためにコメントも追加しました：

$(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)
        });
    }
});
于 2012-05-19T09:39:19.473 に答える