Question

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

问题出在IE9中，GIF没有动画效果。我已经尝试动态添加它并手动添加它，只是让它离开页面，似乎都没有工作。我也尝试在添加GIF之前添加延迟，但这也没有帮助。

另外一件事，我相信这可能与执行POST的表单有关，而不是GET请求（GET请求遇到此问题），但我需要做一个GET，原因是我不想进入。< / p>

Answer 1

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

Answer 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.
  });
};

Answer 3

每个版本的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);

在提交表单之前，如何让IE 9为gif设置动画效果

3 个答案: