Unable to show loading image on ajaxstart and ajaxcomplete

Hi, I am unable to display the loading image during ajax calls, Below is my code. I am using kendo tab strip, generating dynamic html table and appending it to first div 'chart'.

<center><img id="loader" style="vertical-align: middle;height:70px;width:70px;" src="../../Content/Images/spinner.gif" /></center><div id="tabStrip"><ul><li class="k-state-active">
            Table</li><li>
            Chart</li></ul><div id="daily_div" style="overflow: auto;"><table id="daily_table"></table></div><div id="chart"><h2>Chart representation for @Request.QueryString["node"]</h2></div></div><script type="text/javascript">$("#tabStrip").kendoTabStrip({
        animation: {
            open: {
                effects: "fadeIn"
            }
        }
    });$(document).ajaxStart(function () {$("#loader").show();
    });$(document).ajaxComplete(function () {$("#loader").hide();
    });$(function () {
        // get nodequery variable
        var node= getQueryVariable("node");

        var qry_month = getQueryVariable("month");  

        var enb_array = node.split(',');

        var d = new Date();
        var month = d.getMonth();
        var main_dates = [];
        // if month in qry variable is equal to this month, for loop for todays date -1
        if (qry_month == (month + 1)) {
            // get todays date
            var dt = d.getDate();
            if ((month + 1) < 10) {
                month = "0" + (month + 1);
            }
            else {
                month = month + 1;
            }
            // add heading row...
            var heading_row = "<thead><tr><th></th><th></th>";
            for (var i = 1; i <= (dt - 1); i++) {
                var j;
                if (i < 10) {
                    j = "0" + i;
                }
                else {
                    j = i;
                }
                var data_heading = d.getFullYear() + "/" + month + "/" + j;
                main_dates.push(data_heading);
                heading_row += "<th style='width:500px;' id='" + data_heading + "'><b>" + data_heading + "</b></th>";
            }
            heading_row += "</tr></thead>";$('#daily_table').append(heading_row);
            //$('#loader').show();

            load_table(heading_row,enb_array, month, main_dates);    // if commented heading is being populated and loading gif is showing....
        }
        // else if month > this month display null

        else {
            alert("No data to display!");
        }

        // load high chart too...
    });

function load_table(heading_row, enb_array, month, main_dates) {
        var data_row = "" + heading_row;

            for (var enb = 0; enb < enb_array.length; enb++) {
                var enodeb = enb_array[enb];
                var url = decodeURIComponent("/Home/GetDates?enodeb=" + enodeb + "&month=" + month);
                url = url.replace(' ', '');
                //console.log(url);
                //$('#loader').show();$.ajax({
                    type: "GET",
                    url: url,
                    async: false,
                    dataType: "json",
                    contentType: "application/json;charset=utf-8",
                    success: function (response) {
                        //$('#loader').hide();
                        console.log(JSON.stringify(response));      // comment later
                        // alert(response.length);
                        for (var i = 0; i < response.length; i++) {
                            var obj = response[i];
                            //..... generate data_rows for table
                            // end of for key obj
                        }   // end of for response.length

                        // find heading and compare with DateUTC, if equal insert data else insert'null' and skip


                        data_row += "<tr><td><a target='_blank' href='GenerateChart?node=" + node + "'><b>" + node + "</b></b></td></tr>";
                        //console.log(data_row);
                        for (var met = 0; met < metrics.length; met++) {
                            // ...generate data row

                            for (var i = 0; i < main_dates.length; i++) {
                                var pos = $.inArray(main_dates[i], DateUTC_array);
                                if (pos != -1) {
                                    // insert values
                                    switch (metrics[met]) {
                                    }
                                }
                                else {
                                    // insert '-'
                                    data_row += "<td><b> - </b></td>"
                                }

                            } // end of main_dates for
                            data_row += "</tr>";
                        }



                    },   // end of success
                    complete: function () {
                        document.getElementById("daily_table").innerHTML = data_row;
                        //$('#loader').hide();
                    }


                }); //end of ajax call              


            }   //end of for enb length
            //data_row += "</table>";

            //$('#daily_table').append(data_row);
            console.log(data_row);

        }

The multiple ajax calls is taking time, so I want to display a loading gif while the page loads completely...

Any help appreciated!!Thanks!!