javascript - GIF 不适用于 Safari 中的表单提交，但适用于 Chrome

Question

我想在提交表单时将 GIF 动画作为加载程序运行。我制作了一个非常基本的表单，只有一个输入按钮，单击该按钮即可提交表单，并且也应该被 GIF 替换。GIF 在 Safari 中不起作用，但在 Chrome 中起作用。客户要求 GIF 应该在所有浏览器中运行。另一个要求是我不能使用 AJAX 来提交此 answer 中建议的表单。 .

我的 jQuery

$(document).ready(function(){
    $("#myform").on("submit", function(){
        $(".UploadBtn").hide();
        $("#spinner").show();
        $("#img-spinner").show();
    });
});

我的CSS；

#spinner {
    display: none;
    font-size: 20px;
    font-family: serif;
    color: #00C853;
         }

#img-spinner {
    display: none;
             }

.UploadBtn {
    display: show;
           }

我的 HTML；

<form id ="myform" action="{% url 'loading_test' %}" method="POST">
<input type="submit" class="UploadBtn">
</form>
<div id="spinner"><img id="img-spinner" src="{{ STATIC_URL }}img/pacman_orange.gif"> loading</div>

Answer 1

尝试指定宽度:100px；和图像的高度:100px。它对我有用。