Question

当我在后台任务中进行一些处理时，我正在我的网页上显示进度加载器。我面临的问题是包含进度加载器的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）后进度指示器应该是可见的，并且一旦处理完成，display属性应设置为none，因为我调用progressIndicator（一切都完成之后。但是progressIndicatorBackground的状态永远不会在Chrome和IE上设置显示：阻止。

P.S - ＆gt;我使用的是最新版本或Chrome和IE。

P.S.S - ＆gt;我试过修改我的功能但没有运气。问题仍然存在于Chrome和IE上。

function progressIndicator(value) {

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

Answer 1

主要问题是因为使用了同步AJAX调用。它会冻结Chrome和IE，并阻止任何其他事件启动。

进度加载器无法正常工作，因为它正在等待同步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调用本身的成功函数中。

Answer 2

根据我的经验display:none可以制造有缺陷的东西，并且只能作为最后的手段使用。在这里查看this article的替代方案。此外，我发现有时添加:hidden有助于使jquery显示隐藏的或display:none元素。因此，例如$("#progressIndicatorBackground:hidden").show();可能会让它发挥作用。

jQuery show（）方法无法在Chrome和IE浏览器上运行

2 个答案: