javascript - Loading Icon on Ajax Postback in PHP -

this first php project. have imlemented partial ajax postback refering article: php ajax sql reference article

now, trying show loading gif when partial loading starts , hide when partial loading completes. here code using in javascript:

function showuser1(str)      {         if (str == "")          {             document.getelementbyid("mems").innerhtml = "i caanot fetch: " + str;             return;         }         else          {              document.getelementbyid("loadgif").style.visibility= "visible";             if (window.xmlhttprequest)              {                 // code ie7+, firefox, chrome, opera, safari                 xmlhttp = new xmlhttprequest();             }             else              {                 // code ie6, ie5                 xmlhttp = new activexobject("microsoft.xmlhttp");             }             xmlhttp.onreadystatechange = function()              {                 if (xmlhttp.readystate == 4 && xmlhttp.status == 200)                  {                     document.getelementbyid("outerpicwrapper").innerhtml = "";                     document.getelementbyid("mems").innerhtml = xmlhttp.responsetext;                 }             };             xmlhttp.open("get","getmembers.php?q2="+str,true);             xmlhttp.send();             document.getelementbyid("loadgif").style.visibility= "hidden";         }     } 

in first line of body, have written:

<img id="loadgif" src="img/loading.gif" class="loadinggif" /> 

in css file, have written:

.loadinggif { position: absolute; z-index: 200; visibility: hidden; } 

the code working fine , shows data but, loading gif not shown. have tried display:none , display:block in place of visibility. kindly help.

the problem ajax asynchronous. code doesn't wait data fetched ,

 document.getelementbyid("loadgif").style.visibility= "visible";  document.getelementbyid("loadgif").style.visibility= "hidden"; 

these lines executed simultaneously.

to prevent happening can put

document.getelementbyid("loadgif").style.visibility= "hidden"; 

inside callback well

function showuser1(str)  {     if (str == "")      {         document.getelementbyid("mems").innerhtml = "i caanot fetch: " + str;         return;     }     else      {          document.getelementbyid("loadgif").style.visibility= "visible"; // line displays loading gif         if (window.xmlhttprequest)          {             // code ie7+, firefox, chrome, opera, safari             xmlhttp = new xmlhttprequest();         }         else          {             // code ie6, ie5             xmlhttp = new activexobject("microsoft.xmlhttp");         }         xmlhttp.onreadystatechange = function()          {             if (xmlhttp.readystate == 4 && xmlhttp.status == 200)              {                 document.getelementbyid("outerpicwrapper").innerhtml = "";                 document.getelementbyid("mems").innerhtml = xmlhttp.responsetext;                 document.getelementbyid("loadgif").style.visibility= "hidden"; // line hides loading gif             }         };         xmlhttp.open("get","getmembers.php?q2="+str,true);         xmlhttp.send();     } }