燈箱加載gif沒有立即顯示在點擊鏈接

Question

我有一個搜索框。當用戶點擊搜索圖標時，它會觸發一個ajax表單，然後在Lightbox中顯示結果。

問題在於，加載gif直到最後一秒才顯示。查詢需要幾秒鐘，所以我需要這個gif在這段時間顯示。

如何獲取加載gif顯示第二個搜索圖標被點擊，只是指向下面的腳本？

<script> 
    $('#performSearch').on('click', function() { 
     $.ajax({ 
      url: "@(Url.Action("Search", "RespondentSearch"))", 
      type: 'POST', 
      data: { query: $('#query').val() }, 
      cache: false, 
      async: false, 
      success: function (result) { 
       $("#search_results").html(result); 
      } 
     }); 
    }); 
</script> 

<div class="sidebarSearch"> 
    <input type="text" name="query" placeholder="respondent search..." id="query" class="ui-autocomplete-input" autocomplete="off" /> 
    <span role="status" aria-live="polite" class="ui-helper-hidden-accessible"></span> 
    <a href="#search_results" rel="lightbox" id="performSearch"></a> 
</div> 

Answer 1

您可以使用標籤來表示加載gif，它最初將被隱藏。在javascript click事件中顯示加載時使用show（）函數，並且當ajax返回請求的結果時，您使用hide（）函數隱藏加載。

你可以看到一些加載此鏈接http://www.ajaxload.info/

下面介紹如何更改代碼：

<pre> 
    <script> 
     $('#performSearch').on('click', function() { 
      $('#loading').show(); 
      $.ajax({ 
       url: "@(Url.Action("Search", "RespondentSearch"))", 
       type: 'POST', 
       data: { query: $('#query').val() }, 
       cache: false, 
       async: false, 
       success: function (result) { 
        $("#search_results").html(result); 
        $('#loading').hide(); 
       } 
      }); 
     }); 
    </script> 
    <div class="sidebarSearch"> 
     <input type="text" name="query" placeholder="respondent search..." id="query" class="ui-autocomplete-input" autocomplete="off" /> 
     <span role="status" aria-live="polite" class="ui-helper-hidden-accessible"></span> 
     <a href="#search_results" rel="lightbox" id="performSearch"></a> 
     <img src="caminho/loading.gif" id="loading" style="display: none;"/> 
    </div> 
</pre> 

我希望我已經幫你。