背景动画在 Internet Explorer 9.0 中没有动画

Question

我正在使用 Jquery 在表单提交时隐藏/显示 div - 隐藏表单并显示“正在加载...”文本和动画。它在除 Internet Explorer（我的版本是 9.0）之外的所有浏览器中都能正常工作。在 Internet Explorer 中，背景动画没有动画，它显示为静态 gif。任何想法如何解决这个问题？

背景动画生成@@http://www.ajaxload.info/网站

脚本：

<script type="text/javascript">                                         
$(document).ready(function(){
    $("#enf").submit(function(){
        $('#formdiv').hide();
        $('#wait').show();    
    });
});
</script>

表格

    <div id="formdiv">
    <form id="enf" name="enf" enctype="multipart/form-data" action="/upload4.php" method="post">
        ......form elements.......
        <input type="submit" value="Send" name="add" />
    </form>
    </div>
    <div id="wait">Please wait...</div>

css 文件：

#wait{
    display:none;
    text-align:center;
    float:left;
    width:778px;
    background:#fdfdfd url('/loading.gif') no-repeat center center;padding:60px 0 20px 0;
}

Answer 1

我知道这是一个老问题，但我今天遇到了同样的问题。这是我对 CSS 背景特定图像没有动画（而不是img 标签）的解决方案。它适用于 IE8、IE9 以及最新版本的 Firefox 和 Chrome。

JavaScript：

$(function () {
    var submitButton = $('input[type="submit"]');
    submitButton.button('enable');
    submitButton.after('<span class="spinner"></span>');
    submitButton.parents('form:first').submit(function () {
        submitButton.button('disable');
        window.setTimeout("ieSpinnerFix()", 25);
    });
});

function ieSpinnerFix() {
    $('.spinner').css('background', 'url(/Content/Common/Images/ajax-loader.gif) no-repeat center left');
    $('.spinner').show();
    window.setTimeout("anyOtherFunctions()", 5000);
}

function anyOtherFunctions() {
    $('.spinner').text('We are processing your request, please stand by for awesomeness.');
}

HTML：

<form action="/Search" method="post">
    <div class="pageNav">
        <input type="submit" value="Search" />
    </div>
</form>

CSS 样式：

.spinner {
    display: none;
    padding-left: 20px;
    background: url('/Content/Common/Images/ajax-loader.gif') no-repeat center left;
    margin: auto 10px;
}

这个想法是，最初的setTimeout 可以让浏览器在提交表单后冷静下来。如果超时时间太短，我会在 Chrome 上遇到奇怪的问题。将背景 CSS 重新应用到 类似于修复其他帖子中引用的标签。