Question

这是我的jquery ajax设置代码，在chrome中运行良好但在firefox中非常慢，我发现它是加载器gif引起的问题，没有加载器动画，ajax在firefox中运行速度快，任何人知道为什么？非常感谢你。

使用Javascript：

var div=$("<div id='mask'/>");
$.ajaxSetup({
    beforeSend:function(jqxhr,settings){                          
        div.addClass('loader').appendTo('body');                         
    }
    ,complete:function(){
        div.remove();        
    }
});

CSS：

#mask {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    opacity:0.2;
    background-color:#fff;
}

.loader {
    background:url(ajax-loader.gif) center center no-repeat;
}

Answer 1

首先，关闭你的div。另外，您是否尝试预加载GIF？一个2.5kb不能真正减慢你的ajax查询......但哦，没有什么是不可能的。顺便说一下，你的元素是#mask。

在HTML页面上创建掩码元素：

<div id="mask"> </div>

CSS it to：

position:fixed;
top:0;
left:0;
right:0;
bottom:0;
opacity:0.2;
background-color:#fff;
display : none;
background:url(ajax-loader.gif) center center no-repeat;

在您的javascript中：

var div = $("#mask");
$.ajaxSetup({
    beforeSend:function(jqxhr,settings){                          
        div.show();                         
    }
    ,complete:function(){
        div.hide();        
    }
});

Answer 2

我想那是因为你为每个ajax请求添加和删除了div的主体。我建议你尝试在html中声明这个并只显示/隐藏：

#mask {
 ..
 display: none;
 background:url(ajax-loader.gif) center center no-repeat;
 ..
}

$.ajaxSetup({
    beforeSend:function(jqxhr,settings){                          
        $('#mask').show();
    }
    ,complete:function(){
        $('#mask').hide();
    }
});

ajax在firefox中使用加载器gif减速

2 个答案: