VPF::Затемнение с анимацией загрузки

Alukard

Дата 28.3.2008, 23:11 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 145
Регистрация: 14.11.2006

Репутация: нет
Всего: нет

Такая проблемка. Есть форма для загрузки файлов. По нажатии на submit начинается загрузка файла на сервер, но нужно показать юзеру, что загрузка началась и в процессе... Было решено сделать затемнение общего фона страницы и вставкой на этот затемненый фон анимации (gif-файл) .
Так проблема вот в чем. Вот код div слоя, который накладывается сверху по нажатию на сабмит:

Код


<div style='filter:alpha(opacity=20); opacity: 0.2; width:100%; height: 120%; position: absolute; visibility: hidden;' id='loading'>
    <div align="center" style="margin-top: 115px;" id="img_load"><img src="ajax/loading.gif" style="opacity: 1;"></div>
</div>

Сначала как понятно из кода слой не видим, по нажатию на сабмит выполняется яваскрипт, который показывает слой:

Код


function loading_Pashko()
{
    el=document.getElementById('loading');
    el.style.visibility='visible';
    el.style.background='#AAAAAA';
    el2=document.getElementById('img_load');
    el2.style.visibility='visible';
}

Проблема в том, что в Opera все хорошо - фон затемнился, анимация работает...а вот в IE фон затемняется, прозрачность все как полагается, но вставленная гиф-картинка...как бы замерла...то есть не изменяется...а хотелось бы чтобы она была анимирована - двигалась...может знает кто как это править, или может это такая "замораживающая" особенность IE ?

--------------------

Блог блогу рознь: Алукардные РецептыPHP, Операционные системы, Россия & США...etc.

ksnk

Дата 28.3.2008, 23:52 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386

Нужен код формы (тег form ), вместе с реакцией на submit.

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

Alukard

Дата 29.3.2008, 10:00 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 145
Регистрация: 14.11.2006

Репутация: нет
Всего: нет

Я немного сокращу форму для удобства...в ней много скрытых параметров, которые не участвуют в этой проблеме) Вот примерный код:

Код


<form action='' method='post' enctype="multipart/form-data" name="form" id="form">
<input type="file" size="30" name="image_1">
<input type="submit" class="buttons" value="Отправить" onclick="loading_Pashko()">
</form>

--------------------

Блог блогу рознь: Алукардные РецептыPHP, Операционные системы, Россия & США...etc.

ksnk

Дата 29.3.2008, 10:33 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386

маловато будет... пример неадекватен описываемой ситуации.

Код


<script type='text/javascript'>
function loading_Pashko()
{
    el=document.getElementById('loading');
    el.style.visibility='visible';
    el.style.background='#AAAAAA';
    el2=document.getElementById('img_load');
    el2.style.visibility='visible';
}</script>
<body>
<div style='filter:alpha(opacity=20); opacity: 0.2; width:100%; height: 120%; background:gray;position: absolute; visibility: hidden;' id='loading'>
    <div align="center" style="margin-top: 115px;" id="img_load"><img src="http://forum.vingrad.ru/html/emoticons/pack/crazy.gif" style="opacity: 1;"></div>
</div>

<form action='' onsubmit='return false;' method='post' enctype="multipart/form-data" name="form" id="form">
<input type="file" size="30" name="image_1">
<input type="submit" class="buttons" value="Отправить" onclick="loading_Pashko()">
</form>

</body>

вот такое - работает. Правда непонятно, зачем нужно менять visibility и у дива и у картинки... Они-же в одном контейнере...

Как правило, такой эффект проявляется когда переходим по некоррекной ссылке
<a href='' onclick='xxx();return false;'>...<>
IE в этом месте остановит анимацию.

Добавлено через 1 минуту и 31 секунду
В примере добавлен обработчик onsubmit'а и цвет заливки потемнее

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

Alukard

Дата 31.3.2008, 09:48 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 145
Регистрация: 14.11.2006

Репутация: нет
Всего: нет

Потому что стоит данный обработчик :

Код


onsubmit='return false;'

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

--------------------

Блог блогу рознь: Алукардные РецептыPHP, Операционные системы, Россия & США...etc.

ksnk

Дата 31.3.2008, 15:39 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386

Alukard, Если не писать return false в submit'е, то броузер начинает скачивать ответ на посланный запрос с сервера. никакого дела до анимации существующей страницы ему больше нет, и заставить его чего-то там показывать сложно...
можно прикрутить Ajax ...

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

Atlete

Дата 31.3.2008, 15:57 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 105
Регистрация: 15.8.2007

Репутация: нет
Всего: нет

Есть готовые решения по загрузке файлов при помощи AJAX. Там и анимацию любая работает и поддержка всех основных браузеров. Сам использовал в проекте одно из готовых решений.

Alukard

Дата 31.3.2008, 16:02 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 145
Регистрация: 14.11.2006

Репутация: нет
Всего: нет

Понятно, странно что IE, один такой, кто не отображает анимацию, как я писал наверху, Opera и др. отображают все корректно, то есть им все же есть дело до анимации) Просто не хотелось нагружать сервер ещё и аяксом....ладно, ещё подумаю...

--------------------

Блог блогу рознь: Алукардные РецептыPHP, Операционные системы, Россия & США...etc.

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: для новичков \| Следующая тема »