Ajax加载指示器

my this ajax code snipped is working fine, hut how can i display a loading image in a div. in the same scenario.

$.ajax({
         url:'ajax_image_refresher.php?'+$('#frm_text').serialize(),
         method:'get',
         success:function(data){
         if(data =='') return;
         img_tag = '';
         $('#wapal').html(img_tag);
       }

<div id="displayStatus"></div>

jQuery('#displayStatus').html('Loading');

jQuery.ajax({
    //options
    success:function()
    {
       //your codes
       jQuery('#displayStatus').html('Loaded').delay(2000).fadeOut();
    }
});

function performAjaxRequest() {
    // First, put the ajax loading indicator in the div.
    $("#wapal").append("<img>", { src: "ajaxLoader.gif", className: "loader"});

    // Request the new data via ajax.
    $.ajax({
        url: "whatever.wht",
        method: "get",
        success: function(data) {
            // Remove the loading indicator.
            $("#wapal").find("img.loader").remove();

            // Carry on with your function.
            //  ...
        }
    });
}

In the same way that you define a success callback you can define a beforeSend callback.

If you have a hidden image somewhere in your page

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

you could set its visiblitiy in the beforeSend method and hide it again in the succes callback:

$.ajax({
     url:'ajax_image_refresher.php?'+$('#frm_text').serialize(),
     method:'get',
     beforeSend: function() {
        $("#loader").show();
     }
     success:function(data) {
        if(data =='') return;
        img_tag = '';
        $('#wapal').html(img_tag);
        $("#loader").hide();
   }
});

You can take a look at the jQuery ajax documentation for extra information.