僅在數據尚未被緩存時顯示加載微調器

Question

目前，我的代碼顯示加載微調器gif，返回數據並緩存它。但是，一旦數據被緩存，在加載數據之前，會有一瞬間加載gif的閃爍。它分散注意力，我想擺脫它。我想我使用了錯誤的方法在beforeSend功能在這裏：

$.ajax({ 
       type : "GET", 
       cache : false, 
       url  : "book_data.php", 
       data : { keywords : keywords, page : page }, 
       beforeSend : function() {     
        $('.jPag-pages li:not(.cached)').each(function (i) {       
         $('#searchResults').html('<p id="loader">Loading...<img src="../assets/images/ajax-loader.gif" alt="Loading..." /></p>'); 
        }); 
       }, 
       success : function(data) { 
        $('.jPag-current').parent().addClass('cached'); 
        $('#searchResults').replaceWith($(data).find('#searchResults')).find('table.sortable tbody tr:odd').addClass('odd'); 
        detailPage(); 
        selectForm();     
       } 
      }); 

編輯：

從註釋嘗試這一點，有工作代碼再次更新！

var timeout = setTimeout(function(){ 
      $('#searchResults').html('<p id="loader">Loading...<img src="../assets/images/ajax-loader.gif" alt="Loading..." /></p>'); 
      }, 500); 
      $.ajax({ 
       type : "GET", 
       cache : false, 
       url  : "book_data.php", 
       data : { keywords : keywords, page : page }, 
       beforeSend : function() { 
        timeout; 
       }, 
       success : function(data) { 
        clearTimeout(timeout); 
        $('.jPag-current').parent().addClass('cached'); 
        $('#searchResults').replaceWith($(data).find('#searchResults')).find('table.sortable tbody tr:odd').addClass('odd'); 
        detailPage(); 
        selectForm();     
       } 
      }); 

Answer 1

您可以延遲顯示加載GIF四分之一秒左右，足以讓它從不顯示它是否從緩存加載。