Question

在您点击链接或在IE页面上提交表单后，是否有人知道如何制作动画GIF？这在其他浏览器中工作正常。

感谢。

Answer 1

接受的解决方案对我不起作用。

经过一些研究后，我遇到了this workaround，实际上它确实有效。

以下是它的要点：

function showProgress() {
    var pb = document.getElementById("progressBar");
    pb.innerHTML = '<img src="./progress-bar.gif" width="200" height ="40"/>';
    pb.style.display = '';
}

并在你的HTML中：

<input type="submit" value="Submit" onclick="showProgress()" />
<div id="progressBar" style="display: none;">
    <img src="./progress-bar.gif" width="200" height ="40"/>
</div>

因此，在提交表单时，会插入<img/>标记，并且由于某种原因它不会受到动画问题的影响。

在Firefox中测试，ie6，ie7和ie8。

Answer 2

旧问题，但发布给其他googlers：

Spin.js适用于此用例：http://fgnass.github.com/spin.js/

Answer 3

IE假设点击链接会预示新的导航将替换当前页面内容。作为perparing的过程的一部分，它会停止动画GIF的代码。我怀疑你能做些什么（除非你实际上没有导航，在onclick事件中使用return false）。

Answer 4

这是一个jsFiddle，可以在使用method =“post”的表单提交时正常工作。在表单提交事件中添加了微调器。

$("form").bind("submit", onFormSubmit);

function onFormSubmit() {
    setTimeout(showSpinner, 1);
}

function showSpinner() {
    $("body").append($('<img id="spinner" src="spinner.gif" alt="Spinner" />'));
}

See jsFiddle code here

Test it in your IE browser here

Answer 5

我发现了这篇文章，虽然它已经得到了解答，但我觉得我应该发布一些信息来帮助我解决IE 10特有的这个问题，并且可能会帮助其他人遇到类似问题。

我很困惑GIF动画是如何在IE 10中显示的，然后发现了这个宝石。

工具→互联网选项→高级→多媒体→在网页中播放动画

希望这会有所帮助。

Answer 6

这就是我的所作所为。所有你需要的就是分解你的GIF来说出10张图片（在这种情况下，我以01.gif开头并以10.gif结束）并指定保存它们的目录。

<强> HTML：

<div id="tester"></div>

<强> JavaScript的：

function pad2(number) {   
    return (number < 10 ? '0' : '') + number 
}
var 
    dirURL = 'path/to/your/images/folder',
    ajaxLoader = document.createElement('img');
ajaxLoader.className = 'ajax-image-loader';
jQuery(document).ready(function(){
    jQuery('#tester').append(ajaxLoader);
    set(0);
});
function set(i) {
    if (i > 10) i = 1;    
    img.src = dirURL + pad2(i) + '.gif';
    setTimeout(function() {
        set(++i);
    }, 100);    
}

此方法适用于IE7，IE8和IE9（尽管IE9可以使用spin.js）。 注意：我没有在IE6中对此进行过测试，因为我没有机器运行60年代的浏览器，虽然方法很简单，但即使在IE6及更低版本中它也可能有用。

Answer 7

我在尝试在表单提交处理时显示加载gif时遇到此问题。它有一个额外的乐趣，因为相同的onsubmit必须运行验证器，以确保表单是正确的。像其他人一样（在互联网上的每个IE / gif表单上）我都无法让加载微调器在IE中“旋转”（在我的例子中，验证/提交表单）。在查看http://www.west-wind.com的建议时，我发现ev13wt的帖子表明问题是“...... IE不会将图像渲染为动画，因为它在渲染时是不可见的。”这是有道理的。他的解决方案：

在gif将去的地方留空并使用JavaScript在onsubmit函数中设置源 - document.getElementById（'loadingGif'）。src =“gif文件的路径”。

以下是我实施它的方式：

<script type="text/javascript">
    function validateForm(form) {

        if (isNotEmptyid(form.A)) {
            if (isLen4(form.B)) {        
                if (isNotEmptydt(form.C)) {
                    if (isNumber(form.D)) {        
                        if (isLen6(form.E)){
                            if (isNotEmptynum(form.F)) {
                                if (isLen5(form.G)){
                                    document.getElementById('tabs').style.display = "none";                
                                    document.getElementById('dvloader').style.display = "block";                
                                    document.getElementById('loadingGif').src = "/images/ajax-loader.gif"; 
                                    return true;
                                }
                            }
                        }
                    }
                }
            }
        }
        return false;   
    }               
</script>

<form name="payo" action="process" method="post" onsubmit="return validateForm(this)">
    <!-- FORM INPUTS... -->
    <input type="submit" name="submit" value=" Authorize ">

    <div style="display:none" id="dvloader">  
        <img id="loadingGif" src="" alt="Animated Image that appears during processing of document." />
        Working... this process may take several minutes.
    </div>

</form>

这适用于所有浏览器！

Answer 8

与此相关，我必须找到一个修复，其中动画GIF用作背景图像，以确保样式保持样式表。类似的修复程序也适用于我...我的脚本就是这样的（我使用jQuery使得更容易获得计算出的背景样式 - 如何在没有jQuery的情况下进行另一个帖子的主题）：

var spinner = <give me a spinner element>

window.onbeforeunload = function() {
  bg_image = $(spinner).css('background-image');
  spinner.style.backgroundImage = 'none';
  spinner.style.backgroundImage = bg_image;
}

[编辑]通过更多测试，我刚刚意识到这不适用于IE8中的背景图像。我一直在尝试我能想到的所有东西让IE8渲染一个gif动画加载页面，但目前看起来不可能。

Answer 9

基于@danfolkes的回答，这在IE 8和ASP.NET MVC3中适用于我。

在我们的_Layout.cshtml

中

<body style="min-width: 800px">
    <div id="progress">
        <div style="min-height: 200px">
        </div>
        <div id="throbber">
            <img src="..\..\Content\ajax-loader.gif" alt="Progress" style="display: block;
                margin-left: auto; margin-right: auto" />
        </div>
    </div>
    <div id="main">

＆LT;＆LT;＆LT;此处的内容＆gt;＆gt;＆gt; ...

<script type="text/javascript" language="javascript">
    function ShowThrobber() {
        $('#main').hide();
        $('#progress').show();
        // Work around IE bug which freezes gifs
        if (navigator.appName == 'Microsoft Internet Explorer') {
            // Work around IE bug which freezes gifs
            $("#throbber").html('<img src="../../Content/ajax-loader.gif" alt="Progress" style="display: block; margin-left: auto; margin-right: auto"/>');
         }
</script>
<script type="text/javascript" language="javascript">
    function HideThrobber() {
        $('#main').show();
        $('#progress').hide();
    }
</script>
<script type="text/javascript" language="javascript">
    $(document).ready(function () {
        HideThrobber();
    });
</script>

在我们的导航链接中：

<input type="submit" value="Finish" class="submit-link" onclick="ShowThrobber()"/>

或

@Html.ActionLink("DoSometthing", "MyController", new { Model.SomeProperty }, new { onclick = "ShowThrobber()" })

Answer 10

在http://timexwebdev.blogspot.com/2009/11/html-postback-freezes-animated-gifs.html找到此解决方案并且工作正常！只需在设置为可见之前重新加载图像。从按钮的onclick：

调用以下Javascript函数

function showLoader()
{
   //*** Reload the image for IE ***
   document.getElementById('loader').src='./images/loader.gif';
   //*** Let's make the image visible ***
   document.getElementById('loader').style.visibility = 'visible';
}

Answer 11

我意识到这是一个老问题，到目前为止，原始海报都找到了适用于他们的解决方案，但我遇到了这个问题，发现VML标签不会成为这个IE漏洞的牺牲品。当使用VML标记放置在IE浏览器上时，动画GIF仍会在页面卸载期间移动。

注意我在决定使用VML标签之前首先检测到了VML，因此这在FireFox和其他使用正常动画GIF行为的浏览器中都有效。

以下是我解决这个问题的方法。

<input class="myExitButton" type="button" value="Click me"  />

<div class="loadingNextPage" style="display:none" >
    <span style="left:-24px; POSITION: relative; WIDTH: 48px; DISPLAY: inline-block; HEIGHT: 48px" class="spinnerImageVml"><?xml:namespace prefix="rvml" ns = "urn:schemas-microsoft-com:vml" /><rvml:group style="POSITION: absolute; WIDTH: 48px; HEIGHT: 48px; rotation: 1deg" class="rvml" coordsize = "47,47"><rvml:image style="POSITION: absolute; WIDTH: 48px; HEIGHT: 48px; TOP: 0px; LEFT: 0px" class="rvml" src="/images/loading_gray.gif" coordsize="21600,21600"></rvml:image></rvml:group></span>
    <img class="spinnerImage" src="/images/loading_gray.gif" alt="loading..." />
    <div>Just one moment while we access this information...</div>
</div>

<script language="javascript" type="text/javascript">
    window.LoadProgress = (function (progress, $) {

        var getdialogHeight = function (height) {
            var isIE = navigator.userAgent.toLowerCase().indexOf('msie') > -1;
            if (isIE) {
                return height + 'px';
            }
            return height;
        };

        var isVmlSupported = function () {
            var a = document.body.appendChild(document.createElement('div'));
            a.innerHTML = '<v:shape id="vml_flag1" adj="1" />';
            var b = a.firstChild;
            b.style.behavior = "url(#default#VML)";
            var supported = b ? typeof b.adj == "object" : true;
            a.parentNode.removeChild(a);
            return supported;
        };

        var showAnimationDuringPageUnload = function () {
            if (isVmlSupported()) {
                $(".loadingNextPage > .spinnerImage").hide();
            }
            else {
                $(".loadingNextPage > .spinnerImageVml").hide();
            }
        };

        var openLoadingMessage = function () {
            $(".loadingNextPage").dialog({
                modal: true,
                closeOnEscape: true,
                title: 'Please wait...',
                closeText: 'x',
                height: getdialogHeight(200),
                buttons: {
                    "Close": function () {
                        $(this).dialog("close");
                    }
                }
            });
        };

        $('.myExitButton').click(function () {
            openLoadingMessage();
            showAnimationDuringPageUnload();
            window.location.href = 'http://www.stackoverflow.com';
        });


        return progress;
    })(window.LoadProgress || {}, window.jQuery);
</script>

当然，这依赖于jQuery，jQueryUI，并且需要某种类型的动画GIF（“/ images /loading_gray.gif”）。

Answer 12

Jquery的：

$("#WhereYouWantTheImageToAppear").html('<img src="./Animated.gif" />');

Answer 13

刚遇到类似的问题。这些对我来说非常合适。

$('#myElement').prepend('<img src="/path/to/img.gif" alt="My Gif" title="Loading" />');

$('<img src="/path/to/img.gif" alt="My Gif" title="Loading" />').prependTo('#myElement');

另一个想法是使用jQuery＆＃39; .load（）;加载然后添加图像。

适用于IE 7 +

Answer 14

非常，很晚才回答这个，但我刚刚发现使用在CSS中编码为base64 URI的背景图像，而不是作为单独的图像保存，继续在IE8中动画。 / p>

Answer 15

一种非常简单的方法是使用jQuery和SimpleModal plugin。然后当我需要在提交时显示我的“加载”gif时，我会这样做：

$('*').css('cursor','wait');
$.modal("<table style='white-space: nowrap'><tr><td style='white-space: nowrap'><b>Please wait...</b></td><td><img alt='Please wait' src='loader.gif' /></td></tr></table>", {escClose:false} );

Answer 16

我遇到了同样的问题，也常见于像Firefox这样的其他地方。最后我发现动态创建一个带有动画gif的元素，表单提交没有动画，所以我开发了以下workaorund。

1）在document.ready()，在页面中找到的每个FORM，都会收到position:relative属性，然后每个属性都会附加一个不可见的DIV.bg-overlay。

2）在此之后，假设我的网站的每个提交值都由btn-primary css类标识，再次在document.ready()，我查找这些按钮，遍历每个按钮的FORM父级，在表单提交时，我触发showOverlayOnFormExecution(this,true);函数，传递单击按钮和一个切换DIV.bg-overlay可见性的布尔值。

$(document).ready(function() {

  //Append LOADING image to all forms
  $('form').css('position','relative').append('<div class="bg-overlay" style="display:none;"><img src="/images/loading.gif"></div>');

  //At form submit, fires a specific function
  $('form .btn-primary').closest('form').submit(function (e) {
    showOverlayOnFormExecution(this,true);
  });
});

DIV.bg-overlay的CSS如下：

.bg-overlay
{
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  background:rgba(255,255,255,0.6);
  z-index:100;
}

.bg-overlay img
{
  position:absolute;
  left:50%;
  top:50%;
  margin-left:-40px; //my loading images is 80x80 px. This is done to center it horizontally and vertically.
  margin-top:-40px;
  max-width:auto;
  max-height:80px;
}

3）在任何形式的提交中，触发以下函数以显示整个上面的半白色背景覆盖（拒绝与表单再次交互的能力）和其中的动画gif（可视地显示加载动作）

function showOverlayOnFormExecution(clicked_button, showOrNot) 
{
    if(showOrNot == 1)
    {
        //Add "content" of #bg-overlay_container (copying it) to the confrm that contains clicked button 
        $(clicked_button).closest('form').find('.bg-overlay').show();
    }
    else
        $('form .bg-overlay').hide();
}

在表单提交时显示动画gif，而不是在此事件中附加它，解决了各种浏览器的“gif动画冻结”问题（如上所述，我在IE和Firefox中发现了这个问题，而不是铬）

IE中的动画GIF停止

16 个答案: