IE7/IE8 和冻结的 gif 动画 [英] IE7/IE8 and frozen animated gifs
问题描述
我很确定这是一个老问题.
这是我渲染动画 gif 的方式:
这就是我现在拼命想要展示它的方式:
showLoading: function(gifId, butId) {var n = gifId != undefined ?gifId : '正在加载';var l = $('#' + n);//如果浏览器是愚蠢的如果 ('v' == '\v') {var s = l.attr('src');var x = document.getElementById(n);x.style.visibility = "可见";x.style.display = "内联";setTimeout("document.getElementById('" + n + "').src = '"+s+"';",100);} 别的 {l.show();}if (butId != undefined)$('#' + butId).css('cursor', 'default').attr("disabled", true);},问题:动画 gif 出现冻结，没有动画
最奇怪的是，在其他页面上，一切都像魅力一样.
附言不吐槽 IE 是件痛苦的事……唉……
用span包裹:
将js改为:
if ('v' == '\v') {var f = 函数(){l.show();l.attr('src', l.attr('src'));};设置超时(f，100)；} 别的 {l.show();}而且很神秘 - 它现在可以工作了.
我遇到过一次.如果我尝试使用 JavaScript 在浏览器移动到需要一段时间加载的页面时显示一些加载抖动，IE 不会为 GIF 设置动画.我通过将加载 throbber 直接放入隐藏 div 中的 HTML(不是通过 JavaScript 插入)解决了这个问题:
然后在短暂延迟后使用 JavaScript 切换 div 的可见性(这是使用旧版本的 Prototype 库，但您明白了):
该函数在表单的提交按钮中触发:
<输入类型=提交"类=按钮"名称="提交确认"价值="立即购买 →"onclick="setTimeout(fnHideConfirmation, 50);"/>因此，与其延迟 src 属性更改，不如不理会它，只延迟对整个 showLoading() 函数的调用.祝你好运！
I'm quite sure this is an old problem.
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);
},
Problem: Animated gif appears frozen, there is no animation
Strangest thing is that on other page everything works like a charm.
P.s. it's painful not to rant about IE... argh...
EDIT:
Wrapped around with span:
<span id='loading' style='display: none;
position: relative; left: 0px; top: 2px;'>
<img alt='loading' src="<%= Url.Image("loading.gif") %>" />
</span>
changed js to:
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.
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>
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);" />
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屋！
