javascript - Where in this should I add an AJAX call for a load throbber? -

here's function called when user clicks button generates shortened url , i'm wondering use ajax call throbber. takes few seconds , wanted use throbber in mean time. or end creating whole new function outside of 1 called when button clicked? haven't seen other examples code. new here, appreciate help, thanks.

html suppose need link gif with...

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

current js function i'm using generate short url function, takes couple seconds though think need call gif in there somewhere , rid of when callback successful?

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); } 

add image suppose displayed, hide it:

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

here function take url , access api

function getshare(url) {      jquery('#loader').show(); // show loading...     jquery.ajax({         datatype: "jsonp",         jsonpcallback:'apicallback', // send api ?callback=apicallback because api not want work 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         }     }); } 

by way if want value of html element use

var gifurl = jquery('#gif_input').val(); 

instead of

var gifurl = document.getelementbyid('gif_input').value;