jquery - ajax 在 Firefox 中使用加载器 gif 减慢速度

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。

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

我猜那是因为您为每个 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();
    }
});