Imagen animada al llamar al servidor

[satjaen]

Si, pero lo que pasa que si le pongo la class="carga" la imagen empieza a salir nada mas ver el formulario y no cuando le das al boton de busqueda.
A lo mejor hay que poner tambien una funcion para que salga la imagen cuando se le de a dicho boton de busqueda no?
Y otra cosa no puede ser que el <th><div id="carga" class="carga"></div></th>, tenga que ir en la parte de:

Código Javascript:

} 
    if(html_user == '') html_user = '<tr><td colspan="4" align="center">No se encontraron registros..</td></tr>';
    $("#data tbody").html(html_user);
    $('.carga').html('');
}
 

Porque aquí es donde me salen los registros que recojo y es donde debería de salir la imagen animada antes de nada?




Lo he dejado así:

Código Javascript:

function filtrar()
 
{
 
     $.ajax({
 data: $("#frm_filtro").serialize()+ordenar,
 type: "POST",
 dataType: "json",
 url: "ajax.php?action=listar",
 beforeSend: function(){
 $('.carga').html("<img src='imagenes_menu/ajax-loader3.gif' align='center' /><br /> Aguarde por favor...");
 },
success: function(data){ 
        var html_user ='' ;
        if(data.length > 0){ 
        $.each(data, function(i,item){ 
        
        
         
 html_user += '<tr ondblclick="pulsar(this, ' +  String.fromCharCode(39) + item.num_usuario + String.fromCharCode(39)  + ');" >';
 html_user += '<td ><input name="demo" type="radio" value="' + item.num_usuario + '"/></td>';
 html_user += '<td id="row0" >'+item.num_usuario+'</td>';
 html_user += '<td>'+item.telefono+'</td>';
 html_user += '<td>'+item.nombre+' '+item.apellidos+'</td>';
 html_user += '<td>'+item.poblacion+'</td>';
 html_user += '</tr>';
            
                                  
        });                     
    } 
    if(html_user == '') html_user = '<tr><td colspan="4" align="center">No se encontraron registros..</td></tr>';
    $("#data tbody").html(html_user);
    $('.carga').html('');
}
 
            
      });
}
 

Código Javascript:

<table width="100%" id="data" class="table-dg-grid" >
             <thead>
              <tr>
          <th><div id="carga" class="carga"></div></th>
          <tr bgcolor=#DFEBFF id=t70 ondblclick='coloreaf(70,1)' onMouseOver='coloreamosin(70,1)' onMouseOut='coloreamosout(70,1)'>
          <th><span title="selecc">Selecc.</span></th>
          <th><span title="nu_usuario">Nº Usuario</span></th>
          <th><span title="telefono">Teléfono</span></th>
          <th><span title="nombre">Nombre</span></th>
          <th><span title="poblacion">Población</span></th>
             </tr>
            </thead>
                <tbody>
                </tbody>
            </table>