Chrome и IE не показывают GIF-загрузчик ajax

Question

Хорошо, у меня есть функция, которая выполняет 14 вызовов ajax. Перед циклом я показываю div загрузчика, когда цикл заканчивается, я скрываю цикл загрузчика. Это работает только в FF, а не в IE и Chrome. Это почему? Я пробовал два разных подхода, но все равно не получил результатов.

Подход 1:

function myFunction(x,y,z)
{       
    $(".loader").show();

    for( 1 to 14 loop ) 
    {   
        $.ajax({
            type: 'GET',
            url: 'some.php',
            data: 'my data string here',
            async: false,
            dataType: 'html',
            //timeout: 30000,
            success: function(data)
            {
             // do some stuff (show/hide divs, increase some counters, some maths, etc) 
            }
        }); 

    }

    $(".loader").hide();

}

Подход 2

Same as approach 1, but:
- remove show/hide loader div from function
- add to my document ready the following code:

    $(".loader")
      .hide()
      .ajaxStart(function() { $(this).show(); })
      .ajaxStop(function() { $(this).hide(); });

Оба подхода работают в Firefox, но ни один из них не работает в IE и Chrome. Зачем? Как я могу сделать это, чтобы работать кросс-браузер? Спасибо за любой совет.

Edit:

• без ошибок в консоли (Firefox или Chrome)

• Если я переключаю asynch в true, я не вижу загрузчика ни в одном браузере, хотя я вижу, что вызовы ajax выполняются в консоли

После запроса вот фактический код:

function nearBydates(depdate, depPort, arrPort, triptype, direction, route, count)
{

    var datesArray = new Array();
    var date = new Date();
    var parts = depdate.split('-');

    $(".loader").show();
    var oddEven = 'row1';

    // find dates -1 week
    var earlierCounter = 0;
    for(var i=14; i>=1; i--) 
    {
        var d = Date.parse(depdate);
        var nextDay = d.add(-i).day();
        var stringDate = nextDay.toString("yyyy-MM-dd");

        $.ajax({
            type: 'GET',
            url: 'page.php',
            data: 'depDate='+stringDate+"&depPort="+depPort+"&arrPort="+arrPort+'&triptype='+triptype+'&direction='+direction+'&route='+route+'&count='+count+"&class="+oddEven,
            async: false,
            dataType: 'html',
            //timeout: 30000,
            success: function(data)
            {
                if (data!='')
                {
                    $("#"+depPort+"_"+arrPort+"_holder").show();    
                    $("#"+depPort+"_"+arrPort+"_routes").append(data);
                    earlierCounter++;

                    if (earlierCounter == 1)
                    {
                        $("#you-can-options-up").show();
                        $("#you-can-options-bottom").show();
                    }

                    if ( oddEven == 'row1' ) { oddEven = 'row2'; } else { oddEven = 'row1'; }
                }               
            }
        });


    }


    if (  $("#"+depPort+"_"+arrPort+"_routes").html().length > 0  )
    {

    }
    else
    {
        $("#"+depPort+"_"+arrPort+"_error").show();
    }

    $("#"+depPort+"_"+arrPort).animate({height: '0px'}); 
    $("#"+depPort+"_"+arrPort).hide();  
    $(".loader").hide();

}

Answer 1

function myFunction(x, y, z) {
    $(".loader").show();
    var finished_count = 0;

    for (1 to 14 loop) {
        $.ajax({
            type: 'GET',
            url: 'some.php',
            data: 'my data string here',
            dataType: 'html',
            //timeout: 30000,
            success: function (data) {
                // do some stuff (show/hide divs, increase some counters, some maths, etc)
                //count finished ajax request.
                finished_count++;
                if (finished_count === 14) {
                    $(".loader").hide();
                }
            }
        });
    }
}

Answer 2

надеюсь, это поможет

У меня была такая же проблема, и я действительно не знаю, как это происходит, но это может исправить с помощью небольшой задержки в коде, как показано ниже.

раствор 1

$.ajax({
  method: "GET",
  url: "/",
  beforeSend:function(){
    $(".loader").show(1);
    // please note i have added a delay of 1 millisecond , which runs almost same as code with no delay.
  },
  success:function(data){
    $(".loader").hide();
    //here i write success code
  }

});

раствор 2

   $.ajax({
      method: "GET",
      url: "/",
      beforeSend:function(){

        setTimeout(function(){
           $(".loader-image").show();
        }, 1);
        // please note i have added a delay of 1 millisecond with js timeout function which runs almost same as code with no delay.
      },
      success:function(data){
        $(".loader-image").hide();
        //here i write success code
      }

    });

Answer 3

просто поместите ваш загрузчик, где вы показываете набор результатов, т.е.

function myFunction(x,y,z)
{       
    $(".loader").html('loader.gif');

    for( 1 to 14 loop ) 
    {   
        $.ajax({
            type: 'GET',
            url: 'some.php',
            data: 'my data string here',
            async: false,
            dataType: 'html',
            //timeout: 30000,
            success: function(data)
            {
             $(".loader").html(data); 
            }
        }); 

    }

}

с помощью этой техники результат будет перекрывать загрузчик