我一直在使用这个解决方案:
$(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初学者,因此无法找到可行的解决方案。
提前致谢。
答案 0 :(得分: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设置为none,并在Ajax请求触发时显示。