0

私はこのソリューションを使用しています：

$(document).ready(function(){
        jQuery(function($) {
            $('.recipe-results').on('click', '#pagination a', function(e){
                e.preventDefault();
                var link = $(this).attr('href');
                $('.recipe-results').animate({opacity:0.1}, 200, function(){
                    $(this).load(link + ' .recipe-results', function() {
                        $(this).animate({opacity: 1},200);
                    });
                });
            });
        });
    });

ここからシンプルなWordpress AJAXのページネーション

フェードアウトとフェードインの間にローディングGIFを追加できるようにしたいです。私のHTMLコードはこのようなものです

  <div class="recipe-results">

  <?php if (have_posts()) : $count=1; ?>
    <div class="clearfix">
    <?php while ( $loop->have_posts() ) : $loop->the_post(); ?>

    <?php $count++; endwhile;?>
    </div>
    <?php endif; ?>

    <div id="pagination" class="clearfix">
          <!-- pagination stuff here -->
    </div> <!-- close pagination -->

    </div> <!-- close recipe-results -->

私はさまざまな解決策を試しましたが、jQuery を使用した AJAX の初心者であるため、有効な解決策を見つけることができませんでした。

前もって感謝します。

4

1 に答える 1

1

あなたのHTMLで：

<div id="loading" style="display:none;"> 
  <img src="images/loading.gif" title="loading" />
</div>


$(document).ready(function(){
        jQuery(function($) {
            $('.recipe-results').on('click', '#pagination a', function(e){
               $('#loading').show();
                e.preventDefault();
                var link = $(this).attr('href');
                $('.recipe-results').animate({opacity:0.1}, 200, function(){
                    $(this).load(link + ' .recipe-results', function() {
                     $('#loading').hide();
                        $(this).animate({opacity: 1},200);
                    });
                });
            });
        });
    });

デフォルトでloadingは、div は表示なしに設定されており、Ajax リクエストが発生したときに表示されます。

于 2013-09-18T13:20:42.843 に答える