Display Loader Image while converting Table to XML in jQuery

Hi friends,

in my project I have loader for every click event working fine but while converting  table to xml in jquery loader working after loop processing. not working before looping. when debugging the code Loader works correctly.

Please Help..  i have attached code

 $('#div_Ajax_Loader').removeClass('hide');
    if ($('#dp_AG_Month_DemandForecasting').val() != "" && tablerowCount > 0) {
        var headercolumnCount = $('#DemandForcastingTable th').length;
        for (var i = 0; i < tablerowCount; i++) {
            xml = xml += "<ForecastDetails>";
            xml = xml += "<Year>" + year + "</Year>";
            xml = xml += "<Month>" + month + "</Month>";
            for (var j = 0; j < headercolumnCount; j++) {
                if (j != 1 && j != 2) {
                    var columnname = $.trim($('#DemandForcastingTable thead tr').find('th:eq(' + j + ')').text());
                    var data = $('#DemandForcastingTable tbody tr:eq(' + i + ') td:eq(' + j + ')').text();
                    xml += "<" + columnname + ">" + data + "</" + columnname + ">";
                }
            }
            xml = xml += "</ForecastDetails>";
        }

          InsertDemandforecastingExcelData(period, xml);
    }

<section class="content-header"> 
    <div class="box box-primary" style="padding-bottom: 25px;">
        <div class="box-header with-border"></div>
        <div class="box-body">
            <div class="row">            
                <div class="dp-group col-lg-2 col-md-3 col-xs-3 col-sm-12 ddl-details"  id="div_AG_Monthdate">
                    <div id="dp_AG_DemandForecsting" class="input-group input-group-xs date date-picker" data-date="" data-date-format="d-M-yyyy" data-date-viewmode="years" data-date-minviewmode="years">
                        <input type="text" class="form-control" disabled id="dp_AG_Month_DemandForecasting">
                        <span class="input-group-addon"><i class="fa fa-calendar-o"></i></span>
                    </div>
                </div> 
                <div class="col-lg-2 col-md-3 col-xs-3 col-sm-12">
                    <input type="file" id="excelfile">
                </div>
                <div class="col-lg-2 col-md-3 col-xs-3 col-sm-12">
                    <button type="submit" id="uploadfile" class="btn btn-info btn-sm"><i class="fa fa-desktop"></i> Preview Forecast</button>
                </div>
                <div class="col-lg-4 col-md-3 col-xs-3 col-sm-12">
                    <button type="submit" class="btn btn-info btn-sm" id="btn_DownloadTemplate"><i class="fa fa-download"></i> Download Template</button>
                    <input type="checkbox" id="chkPreData" checked> Copy Previous Month Data                   
                </div>          
            </div>
        </div>
    </div>
    <br />
    <div class="box box-primary hide" style="padding-bottom: 25px;" id="DemandforcastingExcelPreview">
        <div class="box-header with-border">
            <h3 class="box-title" style="color: #00c0ef;font-weight: bold;">Forecasting</h3>
        </div>
        <div class="box-body table-responsive no-padding">
            <div class="row">
                <div class="col-md-12 div_table products-list-container table-responsive" style="overflow-y:scroll;" id="Div_TemplateTable"></div>
                <div class="col-md-12 div_table products-list-container table-responsive" style="padding-bottom:10px;padding-top:10px">
                    <button type="submit" class="btn btn-info btn-sm pull-right" id="btn_SaveExcelData"><i class="fa fa-upload"></i> Upload Forecast</button>
                </div> 
            </div>
        </div>
    </div>
    <div class="row" style="display:none;">
        <div class="col-lg-12 col-md-12" id="div_AG_DemandForecasting_M1044_Excel" style="display:none;"></div>
    </div>
</section>