Question

出于某种原因，加载/微调器图标不会显示在IE中，但在Firefox中运行正常。你看到我的代码有什么不对吗？

我的jQuery -

  var loader = $('#loading');

        loader.hide()
            .ajaxStart(function () {
                loader.show();
            })
            .ajaxStop(function () {
                loader.hide();
            });

我的HTML看起来像这样 -

 <div id="te">
        ......
        <div id="container">
            ......
            <div id="body-container">
                ......
                <div id="loading">
                    <img alt="Loading, please wait.." src="/images/spinner.gif" />
                </div>
            </div>
        </div>
    </div>

这是我的CSS -

#te #loading img { background: url('/images/spinner.gif') no-repeat; }
#te #loading  { background-color: #F9F9F9; border: 1px solid #aaa; border-radius: 5px; left: 45%;top: 45%; padding: 20px 50px; position: fixed; }

更新＃1：尝试从css中删除#te #loading img并将#te #loading修改为此但不起作用 -

#te #loading  { background-repeat: no-repeat; background-color: #F9F9F9; border: 1px solid #aaa; border-radius: 5px; left: 45%;top: 45%; padding: 20px 50px; position: fixed; z-index: 1000; }

更新＃2：这是我的js代码 -

<script type="text/javascript">
    $(function () {
        var cpdata;
        setupEvents();
        loadInitialData();

        function setupEvents() {
            var loader = $('#loading');
            loader.hide()
            .ajaxStart(function () {
                loader.show();
            })
            .ajaxStop(function () {
                loader.hide();
            });
            // some other stuff..
        }
        function loadInitialData() {
            cpdata = callMethod(urlLoadInitialData, {}, false);
            if (cpdata != null) {
                // do something with cpdata
            }
        }
        function callMethod(url, parameters, async) {
            var data;
            $.ajax({
                type: 'POST',
                url: url,
                data: JSON.stringify(parameters),
                async: async,
                contentType: 'application/json;',
                dataType: 'json',
                success: function (result) {
                    data = result.d;
                }
            });
            return data;
        }
    });</script>

Answer 1

尝试稍微更改代码：

var loader = $('#loading');
loader.hide();
$.ajaxStart(function() {
    loader.show();
});
$.ajaxStop(function() {
    loader.hide();
});

替代：

jQuery(document).ready(function(){
    jQuery('#loading').hide();
    jQuery.ajaxStart(function() {
        jQuery('#loading').show();
    });
    jQuery.ajaxStop(function() {
        jQuery('#loading').hide();
    });
});

另一种选择：使用完整：

jQuery(document).ready(function(){
    jQuery('#loading').hide();
    jQuery.ajaxStart(function() {
        jQuery('#loading').show();
    });
    jQuery.ajaxComplete(function() {
        jQuery('#loading').hide();
    });
});

一定要包括：

<meta http-equiv="X-UA-Compatible" content="IE=9" />

表示css中的边界半径

又一次尝试 - 可能没有变化，但......

$(function() {
    var cpdata;
    var loader = $('#loading');
    loader.hide().ajaxStart(function() {
        $(this).show();
    }).ajaxStop(function() {
        $(this).hide();
    });
    setupEvents();
    loadInitialData();

    function setupEvents() {
        // some other stuff..  
    }

    function loadInitialData() {
        cpdata = callMethod(urlLoadInitialData, {}, false);
        if (cpdata != null) { // do something with cpdata     
        }
    }

    function callMethod(url, parameters, async) {
        var returnData;
        var pString = JSON.stringify(parameters);
        $.ajax({
            type: 'POST',
            url: url,
            data: pString,
            async: async,
            contentType: 'application/json',
            dataType: 'json',
            converters: {
                "json jsond": function(msg) {
                    return msg.hasOwnProperty('d') ? msg.d : msg;
                }
            },
            success: function(result) {
                returnData = result;
            },
            error: function(xhr, textStatus, errorThrown) {
                var errorMessage = "Ajax error: " + this.url + " : " + textStatus + " : " + errorThrown + " : " + xhr.statusText + " : " + xhr.status;

                if (xhr.status != "0" || errorThrown != "abort") {
                    alert(errorMessage);
                }
                if (errorThrown == "abort") {
                    alert("Aborted Ajax");
                }
            }
        });
        return returnData;
    }
});

ajax加载图标未在IE 9中显示

1 个答案: