灯箱加载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> 

我希望我已经帮你。