javascript - jQuery show()方法在Chrome和IE浏览器上不起作用

当后台任务正在进行某些处理时，我在网页上显示了进度加载器。我面临的问题是，包含进度加载器的div在Chrome和IE浏览器上始终保持“ display：none”。但是，它在FF和Safari上工作正常。

这是HTML

<div id="progressIndicatorBackground">
  <div id="progressIndicator">
    <img src="/cms/images/icons/progressIndicator.gif" alt="Loading...">
  </div>
</div>

的CSS

#progressIndicatorBackground, #preLoaderBackground {
    display: none;
    height: auto;
    width: auto;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 9000;
    position: fixed;
    background-color:rgba(0, 0, 0, 0.5);
}

用于显示和隐藏进度加载器的JS函数

function progressIndicator(value) {

    if(value) {
        $("#progressIndicatorBackground").show();
    }
    else {
        $("#progressIndicatorBackground").hide();
    }
}

在某些情况下，我正在调用progressIndicator函数。例如在页面的其中一个中，我正在调用该函数（这只是我在Web应用程序中使用的一个示例函数。在其他函数中，我也以相同的方式调用progressIndicator函数）

racingSubCategoryBindClick: function(id, parentId) {

        if ($('#'+id).css('display') != 'none') {
            $("#"+id).unbind();
            $("#"+id).live('click', function() {

                // Make all the rest of the group not active, not only this active
                $('.' + $(this).attr('class') +'.active').removeClass('active');
                $(this).addClass('active');

                progressIndicator(true);

                var menuId = $(this).parent().parent().attr('id'), day;
                if (menuId.indexOf(days.today) != -1) day = days.today
                else if (menuId.indexOf(days.tomorrow) != -1) day = days.tomorrow
                else day = days.upcoming;

                $.when(ajaxCalls.fetchEventsForCategory(id, parentId, day)).done(function (eventsMap) {

                    // There are no events
                    if (eventsMap.events.length == 0 || eventsMap.events[0].markets.length == 0) {
                        $('#mainError').show();
                        $('div.main').hide();
                    }

                    else {
                        $('#mainError').hide();

                        $('#'+id).addClass('active');

                        var events = eventsMap.events;

                        // If there are events
                        if (events.length > 0) {

                            var firstActive = racingNavigation.drawAllRaceNumbers(events);
                            racingNavigation.drawRaceView(events, firstActive);
                            // if 1st time and no next selections on the right
                            if ($('#tabaside').css('display') == 'none') racingNavigation.drawNextRaces(false, true, numberOfNextRaces);
                            $('.racing_nextraces').hide()
                        }
                        $('div.main').show();
                    }
                });

                $('.rightmain').show();
                $('#racing_home').hide();

                progressIndicator(false);
            });
        }
    },

当后台任务正在进行并且我正在获取JSON数据时，在调用progressIndicator（true）之后，进度指示器应该是可见的，并且在处理完成后，显示属性应设置为none，因为我在之后调用progressIndicator（false）一切都完成了。但progressIndicatorBackground的状态从未设置为display：在Chrome和IE上处于阻止状态。

PS->我使用的是最新版本或Chrome和IE。

P.S.S->我尝试将功能修改为，但是没有运气。该问题在Chrome和IE上仍然存在。

function progressIndicator(value) {

    if(value) {
        $("#progressIndicatorBackground").css("display", "block");
    }
    else {
        $("#progressIndicatorBackground").css("display", "none");
    }
}

最佳答案

主要问题是由于使用同步AJAX调用。它确实冻结了Chrome和IE，并停止了其他任何事件。

Progress loader无法正常工作，因为它正在等待同步ajax调用完成事件的加载。

原始AJAX通话

fetchEventsForCategory: function (categoryId, parentId, day) {

        var to = (date.getTo(day) == null) ? '' : '&to=' + date.getTo(day);

        return $.ajax({
            url: "/billfold-api/betting/events",
            type: "POST",
            data: 'scid=' + categoryId + '&pcid=' + parentId + '&from=' + date.getFrom(day) + to,
            dataType: "json",
            async: false,
        });
    },

带有成功回调的修改后的AJAX调用

fetchEventsForCategory: function (categoryId, parentId, day) {
        var to = (date.getTo(day) == null) ? '' : '&to=' + date.getTo(day);

        return $.ajax({
            url: "/billfold-api/betting/events",
            type: "POST",
            data: 'scid=' + categoryId + '&pcid=' + parentId + '&from=' + date.getFrom(day) + to,
            dataType: "json",
            async: true,
            success: function(data) {
                progressIndicator(false);
            }
        });
    },

在我调用进度加载器的JS函数中。我删除了progressIndicator(false);，而是将其放在我的Ajax调用自身的成功功能下。

关于javascript - jQuery show()方法在Chrome和IE浏览器上不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23359314/