Question

我拥有的GIF文件/ AJAX微调器在IE，Safari和Chrome上运行良好。当我在Firefox中运行相同的代码时，微调器会旋转一段时间并变为静态/冻结，直到加载下一页。我在这里缺少什么？

这是JS和CSS

  .ajaxspinner {
        display: none;
        overflow: hidden;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1050;
        -webkit-overflow-scrolling: touch;
        outline: 0;
        opacity: 0.8;
        background-position: center;
        background-repeat: no-repeat;
        background-image: url('../ajaxspinner.gif');
    }


function SendData(){
    $('.ajaxspinner').show();

    var message = "";
    var sendDataTostudent= {
        studentid: sID,
    }
    if (message.length == 0) {

        $.ajax({

            url: window.location.href,
            type: "POST",
            context: this,
            data: sendDataTostudent 
            dataType: 'json',

            success: function (data) {


                    window.location.href = data.Url;

            },
            error: function (data) {
                  $('.ajaxspinner').hide();

            }
        });
    } else {
           $('.ajaxspinner').hide();
    }
};

Answer 1

为避免出现此类问题，我将不使用gif，我将使用纯CSS和CSS动画，因为它们比图像文件要轻得多。

仅包含html和css的示例； https://jsfiddle.net/kxyb7w5p/

/* HTML */
<div id='ajax'>
<div id='ajax-spinner'></div>
</div>

/* CSS */
html {background:#000;}
#ajax {position:fixed; width:100%; height:100%; z-index:1000;}
#ajax-spinner {position:absolute; width:50px; height:50px; background:transparent; border:4px solid #00a8ff; border-top-color:#fff; border-radius:50px; left:50%; top:50%; margin-top:-25px; margin-left:-25px; animation:spinner 1s linear infinite;}

@keyframes spinner {
to {transform:rotate(360deg);}
}

AJAX微调器在firefox中冻结

1 个答案: