如何在提交表单之前使IE 9动画化gif

How can I make IE 9 animate a gif right before I submit a form

本文关键字：IE 动画 gif 提交 表单      更新时间：2023-09-26

所以我有一个动画GIF，我只想在用户点击提交按钮时显示，这样，如果需要一段时间才能做出响应，他们就会认为发生了什么。

问题是在IE9中GIF没有动画。我尝试过动态添加它，也尝试过提前添加它，只是把它从页面上删除，但似乎都不起作用。我也尝试在添加GIF之前添加延迟，但这也没有帮助。

还有一件事，我相信这可能与表单执行POST而不是GET请求有关（GET请求遇到了这个问题），但我需要执行GET，原因是我不想进入。

在页面上提交表单后，当前页面的所有执行都将停止。您可以使用AJAX，或者将表单发布到Iframe。

不确定您的具体IE9问题，但您可以在jquery:中尝试这样做

$(function(){
  $('form#my-form').submit(function(e){
    $('#my-animating-gif').show();
  });
};

只需使用属性style="display:none;"（或样式表中的隐藏类和适当的css）加载页面上dom中的动画gif

如果这没能奏效，你可以看看你是否可以阻止定期提交表格，并在你展示gif后自己提交。。。。但我确信这样做和以前的版本是一样的。我想值得一试。

$(function(){
  $('form#my-form').submit(function(e){
    e.preventDefault();
    $('#my-animating-gif').show();
    $(this).submit();  // <-- This might cause infinite recursion
                       // into this event handler.  Probably a
                       // terrible idea.  Go with the above version,
                       // or serialize the form data yourself and submit
                       // it as a separate form but that's outside
                       // of the scope of this answer.
  });
};

这是每个版本的IE都存在的问题。不幸的是，大多数旧的解决方案都无法与IE9一起使用。如果你对只使用javascript的解决方案满意的话，spin.js仍然可以。它非常简单，没有依赖关系（尽管如果你想要的话，有一个jQuery插件）。基本语法是：

HTML:

<div id="spinner" style="width:24px; height:24px"></div>

JS:

var opts = {
    lines: 12,
    length: 7,
    width: 4,
    radius: 12,
    color: '#000',
    speed: 1,
    trail: 54
};
var target = document.getElementById('spinner');
var spinner = new Spinner(opts).spin(target);
相关文章：