IE7/IE8和冻结GIF动画

Question

我很确定这是一个老问题.

这就是我渲染动画gif的方式:

 <img id='loading' alt='loading' style="display: none; position:  
    relative; left:10px; top:2px;" src="<%= Url.Image("loading.gif") %>" />

这就是我现在拼命想要展示它的方式:

showLoading: function(gifId, butId) {
        var n = gifId != undefined ? gifId : 'loading';
        var l = $('#' + n);

        //if browser is stupid
        if ('v' == '\v') {
            var s = l.attr('src');
            var x = document.getElementById(n);
            x.style.visibility = "visible";
            x.style.display = "inline";
            setTimeout("document.getElementById('" + n + "').src = '"+s+"';",  
                        100);
        } else {
            l.show();
        }
        if (butId != undefined)
            $('#' + butId).css('cursor', 'default').attr("disabled", true);
    },

问题: GIF动画显示为冻结,没有动画

最奇怪的是,在其他页面上,一切都像魅力一样.

不要咆哮IE很痛苦......唉......

编辑:

用跨度包裹:

  <span id='loading' style='display: none;
                position: relative; left: 0px; top: 2px;'>
                <img alt='loading' src="<%= Url.Image("loading.gif") %>" />
            </span>

将js更改为:

 if ('v' == '\v') {
            var f = function() {
                l.show();
                l.attr('src', l.attr('src'));
            };
            setTimeout(f, 100);
        } else {
            l.show();
        }

而神秘 - 它现在有效.

Answer 1

我遇到过这一次.如果我尝试使用JavaScript来显示一点点加载throbber,因为浏览器移动到需要一段时间加载的页面,IE将不会为GIF设置动画.我通过将加载的throbber直接放入隐藏的div中的HTML(未通过JavaScript插入)来解决它:

<div id="pseudo-progress-area" style="display: none;">
    <h3>Please wait while we process your PayPal transaction...</h3>
    <p style="text-align: center;">
        <img src="/Media/Template/Images/LoadingProgressBar.gif" alt="" />
    </p>
</div>

然后使用JavaScript在短暂延迟后切换div的可见性(这是使用较旧版本的Prototype库,但你明白了):

<script type="text/javascript">    
    // We have to call this function via a setTimeout() or else IE7 won't
    // animate the GIF as the next page is loading.
    var fnHideConfirmation = function() {
        Element.hide( 'confirmation-area' );
        Element.show( 'pseudo-progress-area' );
    };    
</script>

该功能在表单的提交按钮中触发:

<input 
    type="submit"
    class="button"
    name="SubmitConfirmation"
    value="Buy Now ?"
    onclick="setTimeout(fnHideConfirmation, 50);" />

因此,不要延迟src属性更改,而是将其保留,只需将调用延迟到整个showLoading()函数.祝好运!

Answer 2

Spin.js适用于此用例.