IE7 / IE8和冻结GIF动画 [英] IE7/IE8 and frozen animated gifs
问题描述
我很确定这是一个老问题。
I'm quite sure this is an old problem.
这是我渲染动画gif的方式:
This is how i render my animated gif:
<img id='loading' alt='loading' style="display: none; position:
relative; left:10px; top:2px;" src="<%= Url.Image("loading.gif") %>" />
这就是我现在拼命想要展示它的方式:
This is how I'm desperately trying to show it at the moment:
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动画看起来很冷,没有动画
Problem: Animated gif appears frozen, there is no animation
最奇怪的是,在其他页面上,一切都像魅力一样。
Strangest thing is that on other page everything works like a charm.
PS不要对IE进行咆哮是痛苦的... ... ...
P.s. it's painful not to rant about IE... argh...
编辑:
用span包裹:
<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();
}
和神秘 - 它现在有效。
and mystically - it works now.
推荐答案
我遇到过这一次。如果我尝试使用JavaScript来显示一点点加载throbber,因为浏览器移动到一个需要一段时间加载的页面,IE将不会为GIF设置动画。我通过将加载的throbber直接放入HTML(未通过JavaScript插入)隐藏的div中来解决它:
I ran into this once. If I tried to use JavaScript to show a little loading throbber as the browser moved to a page that was going to take a while to load, IE wouldn't animate the GIF. I solved it by putting the loading throbber directly into the HTML (not inserted via JavaScript) in a hidden div:
<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的可见性(这是使用较旧的原型库的版本,但你明白了):
and then using JavaScript to toggle the visibility of the div after a short delay (this is using an older version of the Prototype library, but you get the idea):
<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>
该功能在表单的提交按钮中触发:
That function is triggered in the form's submit button:
<input
type="submit"
class="button"
name="SubmitConfirmation"
value="Buy Now →"
onclick="setTimeout(fnHideConfirmation, 50);" />
因此,不要拖延src属性更改,不要再单独使用,只需将调用延迟到整个showLoading ()函数。祝你好运!
So instead of delaying the src attribute change, leave it alone and just delay the call to your entire showLoading() function. Good luck!
这篇关于IE7 / IE8和冻结GIF动画的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!