在這個應該添加一個AJAX呼叫加載throbber？

Question

這是當用戶點擊一個生成縮短網址的按鈕時調用的函數，我想知道我會在哪裏使用AJAX調用。這需要幾秒鐘，我想同時使用一個throbber。或者，我最終會在按鈕被點擊時調用的這個函數之外創建一個全新的函數？我還沒有看到任何其他例子，看起來像我的代碼。這裏真的很新，非常感謝任何幫助，謝謝。

的HTML我想我需要的GIF與...鏈接我使用生成的短網址功能

<img src="gif/Loader.gif" id="loader"/> 

當前js函數，它需要幾秒鐘，雖然如此，我想我需要在那裏調用我的gif，並在回調成功時擺脫它？

function getShare() 
{  
     var s = document.createElement('script'); 
     var browserUrl = document.location.href; 
     //alert(browserUrl); 
     if (browserUrl.indexOf("?") != -1){ 
       browserUrl = browserUrl.split("?"); 
       browserUrl = browserUrl[0]; 
     } 
     //alert(browserUrl); 

     var gifUrl = document.getElementById('gif_input').value; 
     var vidUrl = document.getElementById('vid_input').value; 
     //alert(gifUrl + "|" + vidUrl); 

     url = encodeURIComponent(browserUrl + "?gifVid=" + gifUrl + "|" + vidUrl); 
     //alert(encodeURIComponent("&")); 
     s.id = 'dynScript'; 
     s.type='text/javascript'; 
     s.src = "http://b1t.co/Site/api/External/MakeUrlWithGet?callback=resultsCallBack&url=" + url; 
     document.getElementsByTagName('head')[0].appendChild(s); 
} 

function resultsCallBack(data) 
{ 
    //document.getElementById("results").innerHTML = JSON.stringify(data); 
    //alert(JSON.stringify(data)); 
    var obj = jQuery.parseJSON(JSON.stringify(data)); 
    //alert(obj.shortUrl); 
    jQuery("#input-url").val(obj.shortUrl); 
} 

Answer 1

追加script元件到DOM之前添加活動指示器和在resultsCallback刪除它作爲第一行。

如果您還想處理錯誤狀態，請參閱How to tell if a <script> tag failed to load。

Answer 2

添加您的圖像它假設被顯示，但其隱藏：

<img src="gif/Loader.gif" id="loader" style="display:none;"/> 

這裏是功能，如果你想獲得價值是採取URL和訪問API

function getShare(url) 
{ 
    jQuery('#loader').show(); // show loading... 
    jQuery.ajax({ 
     dataType: "jsonp", 
     jsonpCallback:'apiCallback', // this will be send to api as ?callback=apiCallback because this api do not want to work with default jQuery callback function name 
     url: 'http://b1t.co/Site/api/External/MakeUrlWithGet', 
     data: {'url':url}, 
     success: function(response){ 
      jQuery('#loader').hide(); // hide loading... 
      //respponse = {success: true, url: "http://sdfsdfs", shortUrl: "http://b1t.co/qz"} 
      if(response.success){ 

       console.log(response.url, response.shortUrl); 

       jQuery("#input-url").val(response.shortUrl); 
      } 
     }, 
     error:function(){ 
      jQuery('#loader').hide(); // hide loading... 
      //todo: network error o_O 
     } 
    }); 
} 

順便說一句HTML元素的使用

var gifUrl = jQuery('#gif_input').val(); 

而不是

var gifUrl = document.getElementById('gif_input').value;