加载 gif 的 Ajax Wordpress 分页

Question

我一直在使用这个解决方案：

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

从这里Simple Wordpress AJAX pagination

并且我希望能够在淡出和淡入时间之间添加加载 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 的初学者，所以无法找到可行的解决方案。

提前致谢。

Answer 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 请求触发时显示。