Кто-нибудь знает, как работать, чтобы анимированный GIF продолжал анимироваться после нажатия ссылки или отправки формы на странице в IE? Это отлично работает в других браузерах.
Спасибо.
Анимированный GIF в IE останавливается
Ответ 1
Принятое решение не сработало для меня.
После нескольких исследований я наткнулся на это обходное решение, и оно действительно работает.
Вот его суть:
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.
Ответ 2
старый вопрос, но разместив это для других гуглеров:
Spin.js РАБОТАЕТ для этого варианта использования: http://fgnass.github.com/spin.js/
Ответ 3
IE предполагает, что щелчок ссылки предвещает новую навигацию, где текущее содержимое страницы будет заменено. Как часть процесса для этого, он останавливает код, который оживляет GIF. Я сомневаюсь, что вы можете с этим справиться (если вы на самом деле не плаваете, в этом случае используйте return false в событии onclick).
Ответ 4
Здесь jsFiddle, который отлично работает на форме submit с методом = "post". Spinner добавлен в форму submit.
$("form").bind("submit", onFormSubmit);
function onFormSubmit() {
setTimeout(showSpinner, 1);
}
function showSpinner() {
$("body").append($('<img id="spinner" src="spinner.gif" alt="Spinner" />'));
}
Ответ 5
Я столкнулся с этим сообщением, и, хотя он уже был дан ответ, я решил опубликовать некоторую информацию, которая помогла мне с этой проблемой, специфичной для IE 10, и могла бы помочь другим, пришедшим на этот пост с аналогичной проблемой.
Я был озадачен тем, как анимированные gifs просто не отображались в IE 10, а затем нашли этот камень.
Tools → Internet Options → Advanced → MultiMedia → Play animations in webpages
надеюсь, что это поможет.
Ответ 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 и ниже.
Ответ 7
Я столкнулся с этой проблемой при попытке показать gid загрузки во время обработки формы. У этого был добавленный слой забавы в том, что тот же самый 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>
Это работало хорошо для меня во всех браузерах!
Ответ 8
В связи с этим мне пришлось найти исправление, в котором анимированные gif были использованы в качестве фонового изображения, чтобы обеспечить стилизацию в таблице стилей. Аналогичное исправление работало и на меня тоже... мой script пошел что-то вроде этого (я использую 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;
}
[EDIT] С чуть большим тестированием я только что понял, что это не работает с фоновыми изображениями в IE8. Я пытаюсь все, что могу представить, чтобы IE8 отображал анимацию gif, загружая страницу, но в настоящее время она не выглядит возможной.
Ответ 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">
< < < содержание → > ...
<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()" })
Ответ 10
Нашел это решение в http://timexwebdev.blogspot.com/2009/11/html-postback-freezes-animated-gifs.html и он РАБОТАЕТ! Просто загрузите изображение перед настройкой на видимое. Вызовите следующую функцию Javascript с помощью кнопки onclick:
function showLoader()
{
//*** Reload the image for IE ***
document.getElementById('loader').src='./images/loader.gif';
//*** Let make the image visible ***
document.getElementById('loader').style.visibility = 'visible';
}
Ответ 11
Я понимаю, что это старый вопрос и что к настоящему времени оригинальные плакаты нашли решение, которое работает для них, но я столкнулся с этой проблемой и обнаружил, что теги VML не становятся жертвами этой ошибки IE. Анимированные GIF файлы по-прежнему перемещаются во время разгрузки страницы при размещении в браузере IE с использованием тегов VML.
Обратите внимание: я сначала обнаружил 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" ).
Ответ 12
Jquery:
$("#WhereYouWantTheImageToAppear").html('<img src="./Animated.gif" />');
Ответ 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.load(); для загрузки и последующего добавления изображения.
Работает в IE 7 +
Ответ 14
Очень, очень поздно, чтобы ответить на этот вопрос, но я только что обнаружил, что использование фонового изображения, которое кодируется как URI base64 в CSS, а не удерживается как отдельное изображение, продолжает анимироваться в IE8.
Ответ 15
Очень простой способ - использовать jQuery и Плагин SimpleModal. Затем, когда мне нужно показать свою "загрузку" gif на submit, я делаю:
$('*').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} );
Ответ 16
У меня была эта же проблема, обычная и для других разработчиков, таких как Firefox. Наконец, я обнаружил, что динамически создавать элемент с анимированным gif внутри формы submit не оживлял, поэтому я разработал следующий workaorund.
1) В document.ready() каждый FORM, найденный на странице, получает свойство position:relative, а затем к каждому прикреплен невидимый DIV.bg-overlay.
2) После этого, считая, что каждое значение отправки моего сайта идентифицируется классом btn-primary css, снова в document.ready(), я ищу эти кнопки, переходя к родителям FORM каждого из них и в форме submit, Я запускаю функцию 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);
});
});
CSS для DIV.bg-overlay:
.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) В любой форме submit запускается следующая функция, чтобы показать на ней полу-белый фоновой надпись (что отрицает способность снова взаимодействовать с формой) и анимированный 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 в форме submit вместо добавления в это событие решает проблему "зависания анимации gif" различных браузеров (как сказано, я нашел эту проблему в IE и Firefox, а не в Хром)