Проблемы с gif-анимацией в IE 6.0 и 7.0
 

Доброе время суток!

Есть необходимость отображать gif-файл, пока идет загрузка файла. Нашел в проекте работающий (и под IE тоже!) код и попытался приспособить для своих нужд. Мой код не работает под IE (вместо анимации отображается только первый кадр из файла).

Исходный код:

function save_document() {
     displayBusy();
     getElement("newOrder").submit();            
}

<div id="busy" style="display:none;">
    <p><img src="/b2b_sng/mimes/images/busy.gif" alt="Подождите, пока загрузятся данные"/></p>
    <p>Подождите, пока загрузятся данные</p>
</div>
    
<div id="page">
  <form id="newOrder" method="post" action="/b2b_sng/b2b/createdocument.do">   
...
    <div id="nodoc-default">
        <p><span>Выберите вид операции:</span></p>
        <input type="hidden" name="requestSource" value="default"/>
        <p class="p1"><span><input type="radio" id="orderType_1" name="orderType"  checked="checked"  value="q_ZINC" /> Заявка на отгрузку</span></p>
     </div>
    <div id="buttons">
            <ul class="buttons-1">
                <li><a href="#" onclick="save_document();"  >Создать</a></li>
            </ul>
    </div>
  </form>
</div>

мой код:

function beforeUpload(){
	if(document.uploadForm["chosenFile"].value == ""){
		alert("Файл не выбран!");
	}else{
		displayBusy();
		getElement("uploadForm").submit();
	}
}

<div id="busy" style="display:none;margin-top:5ex;">
  <p><img src="/b2b_sng/mimes/images/busy.gif" alt="Подождите, пока загрузятся данные"/></p>
  <p style="font-size:100%">Подождите, пока загрузятся данные</p>
</div>

<div id="page">
  <form id="uploadForm" name="uploadForm" action="/b2b_sng/b2b/z_uploadfile.do" enctype="multipart/form-data" method="POST">
    Файл:<br />
    <input type="hidden" id="docGuid" name="docGuid" value="">
    <input type="file" name="chosenFile" class="submitDoc" /><br /><br />
  </form>
  <div id="buttons">
    <ul class="buttons-1">
      <li><a onclick="beforeUpload();" href="#"  >Загрузка</a></li>
      <li><a href="#" onclick="self.close();return;" title="Закрыть" >Закрыть</a></li>
    </ul>
  </div>
</div>

Функция displayBusy():

function displayBusy(hideCont) {
    if (!hideCont) {
        hideCont = "page";
    }
    var hideScreen = getElement(hideCont);
    var dispScreen = getElement("busy");   
    if (hideScreen) {
          hideScreen.style.display = "none";
          dispScreen.style.display = "";
    }	
}

Исходный код выполняется внутри одного из фреймов, мой код - на отдельной страничке.

Пока идет загрузка gif или всей страницы?

Здесь ИЕ полагает, что пользователь после клика на ссылке как бы ушел со страницы, а значит и анимацию ему показывать не надо.

Плохое решение:

<a onclick="beforeUpload(); return false;" href="#" >Загрузка</a>

Хорошее решение

<span onClick="beforeUpload();" style="тут стили для похожести на ссылку, если надо">Загрузка</span>

Kolridg,
нужно показывать gif-анимацию, пока грузится файл. По сути дела, пока страница не перезагрузится.

Kolyaj,
да, я читал о таком поведении IE
заменил

<li><a onclick="beforeUpload();" href="#"  >Загрузка</a></li>

на

<li><span onClick="beforeUpload();"  >Загрузка</span></li>

- никакого эффекта.

А, ну вы же форму-то отправляете в это же окно, следовательно, со страницы вы уходите.

Но почему тогда исходный код работает?

Остается только сделать два фрейма на этой странице и отображать gif-файл в верхнем, пока нижний будет отправлять данные, а потом перезагрузить всю страницу...
Есть еще какие-нибудь идеи?

Отправляйте форму в невидимый iframe и отлавливайте событие его загрузки, чтобы перезагрузить страницу.

Здравствуйте! Надеюсь, по теме вопрос.. Есть вот такой код CSS:

В IE7 первые две строчки кода работают как надо: анимированные гифы проигрываются при наведении и убирании мышки.
а две вторые сточки - НЕТ: Когда мышку убираешь с .menu_, снизу уже последний кадр отображается ...

p.s. - в Опере все работает на ура. И было бы понятней, если б в IE вообще не работало...

Вобщем, поделюсь на радостях.. несколько бессонных ночей и проблема решена таким образом:

Размножил нижний GIF и назначил на каждую кнопку свой. Верхний GIF для всех один остался.
Все теперь прекрасно проигрывается при наведении и убирании мышки и в IE в том числе...

Вобщем, если на две кнопки одинаковый GIF с анимацией навесить, то он не будет обновляться на событие типа mous over, если это прописывать через CSS, во как (это в IE, Mozilla и FireFox. А в Опере работало по-любому)