如何在提交表单之前让 IE 9 为 gif 设置动画答案

【问题标题】：How can I make IE 9 animate a gif right before I submit a form如何在提交表单之前让 IE 9 为 gif 设置动画
【发布时间】：2012-02-02 19:54:46
【问题描述】：

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

问题在于 IE9 中的 GIF 没有动画效果。我尝试过动态添加它并事先添加它，然后将它从页面上移开，但似乎都不起作用。我还尝试在添加 GIF 之前添加延迟，但这也无济于事。

另一件事，我认为这可能与执行 POST 而不是 GET 请求的表单有关（GET 请求遇到此问题），但是出于我不想进入的原因，我需要执行 GET。

【问题讨论】：

试试这个norio.be/blog/2008/09/…
这在 IE 的过去版本中有效，但我发现它似乎不适用于 IE9。你在 IE9 上取得过成功吗？
我遇到了类似的问题，IE9 在 Modals Modal dialog missing image on form submit, IE9+ 中杀死图像加载。我相信在提交表单时 IE9 会终止 ANY 处理。假设这是一些错位的效率问题？

标签： javascript html internet-explorer

【解决方案1】：

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

【讨论】：

是的，但它是动画 GIF 动画，它应该仍然能够动画，直到它不再显示而不是显示为静态图像。这是所有其他浏览器所做的，即使是过去的 IE 版本也能做到这一点

【解决方案2】：

不确定您的特定 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.
  });
};

【讨论】：

我知道怎么加，问题是IE9特有的。
您有尝试过的工作示例或代码示例吗？当我们不确定您到目前为止尝试了什么时，很难给出好的答案。

【解决方案3】：

每个版本的 IE 都存在这个问题。不幸的是，大多数旧的解决方法都不适用于 IE9。一个仍然可以使用的是spin.js，如果您可以使用纯 javascript 解决方案。它非常简单并且没有依赖项（尽管如果你想要的话，它有一个 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);

【讨论】：