Wordpress ajax 分页答案

【问题标题】：Wordpress ajax paginationWordpress ajax 分页
【发布时间】：2011-05-19 00:47:18
【问题描述】：

我正在使用从教程中找到的这段代码在我的 wordpress 网站上启用 Ajax 分页。一切正常，但我想稍微增强它。

在您单击下一页按钮的那一刻，会有一个轻微的停顿，没有任何反应。我想显示这样的“等待”类型图像之一（http://www.costacruises.co.uk/B2C/Images/Skin/Default/gfx/ico_waiting.gif）但不确定我会如何做这个。

这是我正在使用的代码。

jQuery('#postPagination a').live('click', function(e){
    e.preventDefault();
    var link = jQuery(this).attr('href');
    jQuery('#content-inner').fadeOut(500).load(link + ' #content-inner', function(){ jQuery('#content-inner').fadeIn(500); });
});

谢谢

【问题讨论】：

标签： jquery wordpress pagination

【解决方案1】：

您需要创建“加载”元素，使用 CSS 正确定位它并设置为 display:none。 jQuery的fadeOut和fadeIn函数支持回调规范，所以你可以把上面的代码改成这样的

jQuery('#postPagination a').live('click', function(e){
    e.preventDefault();
    var link = jQuery(this).attr('href');
    jQuery('#content-inner').fadeOut(500, function(){
            jQuery("#spinner").show();
    }).load(link + ' #content-inner', function(){ jQuery('#content-inner').fadeIn(500, function(){
            jQuery("#spinner").hide();
    }); });
});

将“#spinner”更改为加载元素的 id 或类。

【讨论】：