Show processing image until jQuery AJAX Call is completed in ASP.Net

hi

i have a textox on which i have call ajax to check the product is already exist

i have done it ,now i want to show the processing image when the textbox's onchange event occurs

my code is 

.aspx:
<script>
function ValidateCategory() {
            var product_category_title = $("#txttitle").val();
            $.ajax({
                type: "POST",
                url: "../Ajax_Helper/Ajax_Helper.aspx/ValidateCategory",
                data: JSON.stringify({ 'product_category_title': product_category_title }),
                datatype: "JSON",
                contentType: "application/json",
                async: false,
                success: function (data) {
                    for (var i = 0; i < data.d.length; i++) {
                        if (data.d[i].product_category_id != null || data.d[i].product_category_id != '') {
                            alert("The Category is Already Exist");
                            $("#txttitle").val('');
                            $("#txttitle").focus();
                        }
                    }

                }


            });
        }
</script>
 <div id="popup-wrapper">
        <div class="row-fluid">
            <div class="span2">
                <!--Sidebar content-->
            </div>
            <div class="span8 text-center">
                <h4 class="popheader" style="vertical-align: top;">
                    Add Product Category</h4>
            </div>
            <div class="span2 text-right">
                <img src="../images/chatclose.png" id="close-btn" style="cursor: pointer" alt="Close" />
            </div>
        </div>
        <hr />
        <div class="text-center text-error" id="diverrormsg" style="height: 20px">
        </div>
        <div class="container-fluid">
            <div class="row-fluid">
                <div class="span2">
                    <!--Sidebar content-->
                </div>
                <div class="span8">
                    <label>
                        Category Title</label>
                    <input type="text" id="txttitle" style="width: 97%" class="required" onchange="ValidateCategory()" />
                     <img src="../images/ajax-loader.gif" id ="imgloader" style="display:none ;" />
                   
                    <label>
                        Category Sub Title</label>
                    <input type="text" id="txtsubtitle" style="width: 97%" class="required" />
                    <label>
                        Description</label>
                    <textarea id="txtdescrip" rows="5" cols="5" style="width: 97%" class="required"></textarea>
                    <br />
                    <div class="row-fluid">
                        <div class=" span12" style="vertical-align: middle">
                            <div class="span6 text-left">
                                <button type="button" class="btn btn-primary" id="btnadd_category">
                                    Add Category</button>&nbsp;&nbsp;<img src="../images/loadinfo.net.gif" alt="loader"
                                        style="display: none;" />
                            </div>
                            <div class="span6 text-left">
                                <div class="text-success" style="display: none;" id="msg">
                                    Category Added Successfuly</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="span2">
                    <!--Sidebar content-->
                </div>
            </div>
        </div>
    </div>

so help me

thanks