Question

当我发送jQuery时，我想通过ajaxStart()显示加载gif。完成后，gif应该使用ajaxStop()消失。

$( document ).ajaxStart( function () {
 $('#info').show();

}).ajaxStop( function () {
 $('#info').hide();
});

它适用于Firefox，但不适用于IE（我使用的是版本8）。 IE似乎在查询结束时执行ajaxStart()，然后执行ajaxStop()。如果我注释掉$('#info').hide();部分，我会在获取数据后看到gif。

我可以通过设置async=true来解决这个问题，但我不想这样做。还有另一种方式吗？

我读了一些文章表明很多人都有这个问题，但我找不到答案。

修改

我认识到ajaxStart已正确执行，但请求会导致浏览器冻结，直到我收到回复。这种情况发生得如此之快，以至于无法显示加载的gif。在alert()之后用ajaxStart尝试并且gif出现了。之后弹出alert，然后发送请求，导致浏览器和gif冻结。

Answer 1

尝试使用display属性来显示/隐藏您的DIV。

<强> HTML

<div id="loading">&nbsp;</div>

<强> CSS

#loading {
    display: none;
    background: rgba(255, 255, 255, .6) 
            url(../img/loading.gif) 
            50% 50% 
            no-repeat;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
}

<强>的jQuery

$(document).on({
    ajaxStart: function() {
        $('#loading').css('display', 'block')
    },
    ajaxStop: function() {
        $('#loading').css('display', 'none')
    }
});

Answer 2

我有同样的问题。加载div显示在Firefox中，但不显示在ie8和ie9中。我做的是我刚刚添加了一个setTimeout间隔及其工作原理。

首先检查浏览器是IE8还是IE9。在你的html中添加：

<!--[if IE 8]><html lang="en-us" class="ie ie8"><![endif]-->
<!--[if IE 9]><html lang="en-us" class="ie ie9"><![endif]-->
<!--[if gt IE 9]><!--> <html lang="en-us"><!--<![endif]-->
<head>

如果是ie8或ie9添加间隔，如果不是，则

$(document).ready(function() {
    var ie8or9 = $('html').hasClass('ie8') || $('html').hasClass('ie9');
    $(document).ajaxStart(function() {
        setTimeout(function(){
            $('#loading').show();
        }, ie8or9 ? 50 : 0);
    }).ajaxStop(function() {
        setTimeout(function(){
            $('#loading').hide();
        }, ie8or9 ? 100 : 0);
    });
});

Answer 3

请先尝试在此网站上浏览类似问题的答案。

JQuery Internet Explorer and ajaxstop

你想要ajaxComplete

$(document).ajaxComplete(function() {loading.hide()});

http://api.jquery.com/ajaxComplete/

Internet Explorer和ajaxStart / ajaxStop

3 个答案: