IE7/IE8 и замороженные анимированные gifs
Я уверен, что это старая проблема.
Вот как я создаю свой анимированный 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 выглядит замороженным, анимации нет
Самое странное, что на другой странице все работает как шарм.
P.s. это болезненно, чтобы не говорить о IE... argh...
EDIT:
Обернуто с помощью 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();
}
и мистически - он работает сейчас.
Ответы
Ответ 1
Я столкнулся с этим однажды. Если я попытался использовать JavaScript, чтобы показать небольшую загрузку throbber, поскольку браузер переместился на страницу, на которую потребуется некоторое время, чтобы загрузить, IE не будет анимировать GIF. Я решил это, поставив загрузку throbber прямо в HTML (не вставленный через JavaScript) в скрытый 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 после короткой задержки (это использует более старую версию библиотеки 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(). Удачи!
Ответ 2
Spin.js работает для этого случая использования.
Ответ 3
Я нашел принятый ответ немного сложным для понимания или реализации, но у меня была такая же проблема, когда я это делал,
У меня был следующий HTML
<div id="progress_wheel_div" align="center" style="height:100%; display:none; vertical-align: middle;">
<img src="images/progress_wheel.gif" style="margin-top: 204px;"/>
<p class='arbitText' style="font-weight: bold;">Processing, Please wait!</p>
</div>
и в java script Я делал это
function onSubmit() {
var divProgressWheel = document.getElementById("progress_wheel_div");
divProgressWheel.style.display = "block";
}
Но это не был анимационный файл gif,
Решения
Обновлен мой java script и сделал его следующим
function onSubmit() {
setTimeout(showProgress, 500);
}
function showProgress() {
var divProgressWheel = document.getElementById("progress_wheel_div");
divProgressWheel.innerHTML = "<img src='images/progress_wheel.gif' style='margin-top: 204px;'/><p class='arbitText' style='font-weight: bold;'>Processing, Please wait!</p>";
divProgressWheel.style.display = "block";
}
обратите внимание, что divProgressWheel.innerHTML такой же, как у html.
Поэтому мы можем удалить ненужный html, так что измененный html будет:
<div id="progress_wheel_div" align="center" style="height:100%; display:none; vertical-align: middle;">
</div>