Индикатор загрузки

[trancer_ru]

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

1. Табличка строится так: <div style='position:absolute;top:##;left:##;z-index:2'><span id='loader'></span></div>

2. Выводится на экран так: при нажатии кнопки "Выполнить" онкликом переходит в яваскрипт-функцию. Данная функция сначала проверяет заполненность всех необходимых полей и затем выполняет форму (document.form.submit()). И вот перед этой строчкой я для вывода таблички пишу следующее - document.getElementById('loader').innerHTML="Идет загрузка файла. Ждите..<br><br><img src='images/loader.gif'>";

3. И как результат: нажимаем кнопку и появляется табличка с надписью и рисунком.

Проблема же состоит в следующем: табличка вылазит, все нормально, но рисунок никак не хочет отображаться, ни в ie ни в ff. Бывает что при повторной загрузке рисунок появляется, бывает что нет. Если его нет, то на его месте в ie отображается квадрат (по размеру рисунка), а в ff рамка от рисунка.

PS: отображение рисунков в опциях броузера включено.

________________

Примечание: пробовал строку

document.getElementById('loader').innerHTML='Идет загрузка файла. Ждите..

<img src='images/loader.gif'>'

поставить в самом начале вышеуказанноу функции - все отлично - рисунок на месте, надпись тоже.

Вот яваскрипт функция:

function CheckData(arg) // Проверка заполненности формы и ее выполнение
{
//если эти закомментированные строки раскомментировать, то рисунок появляется
//document.getElementById("loader").innerHTML="<table border='1' width='300px' height='200px'>"+
//"<tr valign='middle' align='center' bgcolor='#FFFFFF'>"+
//"<td><img src='images/body_imgs/loader.gif' border='0'></td></tr></table>";
document.getElementById("loader").innerHTML=""; // на всякий случай - очистка поля

 	if (document.user_frm.fname.value=="") alert ("Вы не ввели фамилию");
		else if (document.user_frm.name.value=="") alert("Вы не ввели имя");
		else if (document.user_frm.tel_d.value=="" && document.user_frm.tel_m.value=="") alert ("Вы не ввели номер телефона");
		else if (document.user_frm.captcha.value=="") alert ("Вы не ввели код");
		else
		{
//а эти строки выводят только надпись, без рисунка.
		   document.getElementById("loader").innerHTML="<table border='1' width='300px' height='200px'>"+
	   "<tr valign='middle' align='center' bgcolor='#FFFFFF'>"+
	   "<td>Внимание! Идет загрузка данных. <br><br><img src='images/loader.gif' border='0'></td></tr></table>";
			document.user_frm.submit();
		}
}

———————————-

У кого какие мысли по этому поводу?

Edited February 19, 2010 by trancer_ru

[s0rr0w]

У кого какие мысли по этому поводу?

Неправильный путь к файлу или файл отсутствует на сервере

[trancer_ru]

Путь правильный - "иногда отображается (при повторной загрузке)". Если на рамке от непоявившегося рисунка кликнуть правой кнопкой мыши и вырбрать "Открыть изображение" то он его открывает - так как нужно

[dandandan]

Путь правильный - "иногда отображается (при повторной загрузке)".

попробуйте прописать полный путь до сайта <img src=http://site/'images/loader.gif'> Возможно у вас на сайте стоит ЧПУ.

либо поставить сначала слеш <img src='/images/loader.gif'>

Второй вариант - картинка не успевает загрузиться...

Edited February 21, 2010 by dandandan

[barsev]

А если сделать следующее:

удалить в HTML span id='loader', его id присвоить диву;

в див вписать код, который у вас в innerHTML;

диву задать стиль display:none;

в скрипт вместо innerHTML=и т. д. вписать style.display='block'.

[trancer_ru]

http://ri-printufa.ru/111.php - вот пример того что надо. там все просто (по коду страницы можно посмотреть). а на самом сайте почему то не хочет работать, хотя там все также.

Прописывание полного пути к рисунку и слэша не помогли((((

По поводу изменения стиля display у div'a - display:none работает, а при изменении скриптом на block ничего не происходит.

Edited February 22, 2010 by trancer_ru

[barsev]

Попробуйте изменить id: вместо "loader" назвать, например, "expect", соответственно в HTML и JavaScript кодах.

У меня похожее было со словом "player" - изменил на "Pleer" и все заработало.

Если не поможет, то измените немножко коды в HTML и JavaScript вот так:

HTML
<div id='expect' style='position:absolute;top:-50%;left:40%;z-index:2'><table border='1' width='300px' height='200px'>
<tr valign='middle' align='center' bgcolor='#FFFFFF'>
<td>Внимание! Идет загрузка данных. Дождитесь загрузки файла на сервер. Время закачивания зависит от скорости интернета и работы Вашего провайдера!<br><br><img src='loader.gif' border='0'></td></tr></table></div>

Это будет вместо 187 и 188 строк HTML кода странички вашего сайта.

А в скрипт вместо document.getElementById("loader").innerHTML=и т. д. вписать следующее:

JavaScript
document.getElementById("expect").style.top='30%';

По моему, это у вас находится в двух местах.

И везде надо убрать document.getElementById("loader").innerHTML=""; - это лишнее.

Да, и на своем сайте аннулируйте заказ 00015 от Иванова Ивана: это я попробовал, что получается.

[trancer_ru]

В конце концов помог лишь способ с изменением у div'a положения top/left. Спасибо barsev'у. Но мне кажется - это способ что называется "в лоб". На этом сайте - когда отправляешь сообщение, тоже такая штука появляется и здесь она сделана путем изменения у div'a стиля - display.