Chrome和IE没有显示ajax loader gif

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。为什么？如何使这个跨浏览器工作？谢谢你的任何建议。

修改

• 控制台（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").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); 
            }
        }); 

    }

}

使用这种技术，结果将与加载器重叠

Answer 2

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 3

我希望这有帮助

  

我有同样的问题，我真的不知道它是怎么发生的，但它可以   使用如下代码中的小延迟来修复。

解决方案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
      }

    });