WordPress的阿賈克斯分頁

Question

我使用這段代碼，我從教程中發現，使我的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); }); 
}); 

感謝

Answer 1

您需要創建「加載」的元素，它與CSS正確定位並設置爲顯示：無。 jQuery的淡出和淡入功能，支持回調的規範，所以你會在上面的代碼更改爲更具這樣

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或類。