ajax gif loader

Question

hi, can you tell me where and how to put an ajx loading.gif? my html code is below

<div class="searchbox">

    <input  id="Search" onkeyup="searchKeyUp(event)
     " name="Search" class="searchtextbox"/>

</div>
</td>

 <td width="57"><br> <img onclick="search(); return false;" style=" cursor:pointer" eight="30" onmouseover="this.src='images/j3.jpg'" type="image" src="images/j1.jpg"    onmouseout="this.src='images/s1.jpg';" alt="" width="57" ></td>
 </tr>
 </table> 
 <div> 
 <table cellspacing="0" cellpadding="0" border="0">

  <tr valign="left">

 <td><div class="resultCss" content="tableId" id='resultDiv'>

 </div></td>
 </tr>

        </table>   

Answer 1

Before your AJAX request starts , display the ajax_load.gif and after it ends, remove it.

Tip: Make sure you have only 1 AJAX request sent to your server at a time like https://www.buxfer.com

Answer 2

build in on the position you want to have it and give display:none on it. In search() before AJAX Call edit the display:none to block and hide the image onSuccess off the AJAX function again.