阿贾克斯减缓与在Firefox

Question

装载机GIF这是我的jQuery AJAX设置代码，效果很好Chrome，但很在Firefox很慢，我发现它是装载机GIF引发的问题，如果没有加载动画，阿贾克斯快速运行中firefox，任何人konw为什么？非常感谢你。

的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

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

1. HTML页面上创建你的面具元素：

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

1. CSS它：

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; 

1. 在你的JavaScript：

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

Answer 2

我想这是因为你添加和删除DIV到身体每一个Ajax请求。我建议你尝试在HTML中声明这一点，只是显示/隐藏：

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

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