如何將加載gif動畫應用到我的自動建議？

Question

我很幸運能夠在美國服務器上獲得我的解決方案，而我的觀衆位於斯堪的納維亞半島（在池塘的另一側）。

這使得響應時間有點慢，並且當我在我的搜索框中使用AutoComplete時不理想。

爲了給用戶一些反饋，我想顯示一個動畫加載GIF。

問題是我不知道如何在回調之前啓動它。 自動完成搜索數據庫時應啓動動畫，並在數據庫搜索完成時停止動畫。

我的JavaScript看起來是這樣的：

jQuery(document).ready(function() { 
    var options = autosuggestOptions(); 
    var response = new bsn.AutoSuggest('mySearchBox', options); 
}); 

    function autosuggestOptions() 
    { 
    var options = { 
     script:"wp-content/themes/test/include/someFile.php?", 
     varname:"input", minchars: 2, delay: 200, json:true, maxresults:15, timeout: 5000, 
      callback: function (obj) { (.. do stuff here ..) } 
    }; 
    return options; 
    } 

我的GIF動畫在裏面<div class="loader"></div>。

建議任何人？

Answer 1

立即在autosuggestOptions()之內，顯示div。然後將其隱藏在回調中。

function autosuggestOptions() { 
    // Show the loader 
    $(".loader").fadeIn(); 
    var options = { 
    callback: function(obj) { 
     /* Safe to hide the loader */ 
     $(".loader").fadeOut(); 
    } 
    }; 
}