Индикатор загрузки - Веб программирование

Пишу веб-приложение на JSP с использованием ajax. Хочется сделать так, чтобы при подгрузки изображения появлялся индикатор загрузки (не прогресс бар, а просто какой-нибудь gif-файл, символизирующий о том, что идет загрузка).

Сделал следующим образом:

На страничке

<div id="big_img" style="display:inline;"><img id="PictField" name="PictField" src="tatata.jpg" width="600" height="450"/></div>
<div id="indicator" style="display:none;"><img src="ajax-loader.gif"></div>

И так:

function makeRequest(url)
{
    document.getElementById("big_img").style.display = "none";
    document.getElementById("indicator").style.display = "inline";
    .......
    document.getElementById("indicator").style.display = "none";
    document.getElementById("big_img").style.display = "inline";
}

Но индикатор не появляется почему-то. Не подскажите, в чем проблема?

Здравствуйте, sendoff, Вы писали:
S>

S>function makeRequest(url)
S>{
S>    document.getElementById("big_img").style.display = "none";
S>    document.getElementById("indicator").style.display = "inline";

Может быть слишком быстро выполняется:

S>    .......

S>    document.getElementById("indicator").style.display = "none";
S>    document.getElementById("big_img").style.display = "inline";
S>}
S>

Здравствуйте, Аноним, Вы писали:
А>Может быть слишком быстро выполняется:

S>>    .......
А>

?

Нет, дело не в этом. Я подгружал большие картинки, которые грузились довольно долго, но индикатора так и не было. Но если убрать 2 последние строчки

    document.getElementById("indicator").style.display = "none";
    document.getElementById("big_img").style.display = "inline";

то есть не выводить новую картинку на экран, то результатом будет индикатор.

Здравствуйте, sendoff, Вы писали:

S>И так:
S>

S>function makeRequest(url)
S>{
S>    document.getElementById("big_img").style.display = "none";
S>    document.getElementById("indicator").style.display = "inline";
S>    .......
S>    document.getElementById("indicator").style.display = "none";
S>    document.getElementById("big_img").style.display = "inline";
S>}
S>

S>Но индикатор не появляется почему-то. Не подскажите, в чем проблема?

Тут самое интересное то место где у тебя ........ находятся.

Единственный вариант того что там может быть это *синхронный* ajax request но
как я понимаю у тебя там чего-то другое. Что именно?

Здравствуйте, c-smile, Вы писали:
CS>Единственный вариант того что там может быть это *синхронный* ajax request но
CS>как я понимаю у тебя там чего-то другое. Что именно?

Скорее всего Вы правы. Вот полный код:

var httpRequest = false;
var objID;

function makeRequest(url)
{
    document.getElementById("big_img").style.display = "none";
    document.getElementById("indicator").style.display = "inline";

    httpRequest = false;

    if (window.XMLHttpRequest)
    { // Mozilla, Safari,...
        httpRequest = new XMLHttpRequest();
        if (httpRequest.overrideMimeType)
        {
            httpRequest.overrideMimeType('text/xml');
        }
    }
    else if (window.ActiveXObject)
    { // IE
        try
        {
            httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch (e)
        {
            try
            {
                httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch (e)
            {
            }
        }
    }

    if (!httpRequest)
    {
        alert('Cannot create an XMLHTTP instance');
        return false;
    }
    httpRequest.onreadystatechange = loadPicture;
    httpRequest.open('GET', url, true);
    httpRequest.send(null);

    document.getElementById("indicator").style.display = "none";
    document.getElementById("big_img").style.display = "inline";
}

function loadPicture()
{
    var xml = httpRequest.responseXML;

    var elems = xml.getElementsByTagName('ROW');
    for (var i = 0; i < elems.length; i++)
    {
        var elem = elems.item(i);
        var elemID = elem.getElementsByTagName('ID')[0];
        if (elemID.text == objID)
        {
            document.getElementById("PictField").src = elem.getElementsByTagName('PICT')[0].text;
            break;
        }
    }
}

Суть такая — есть картинка и кнопка. Нажимаю на кнопку подгружается новая картинка.

Буду очень признателен за помощь.

sendoff wrote:

...
>     httpRequest.onreadystatechange = loadPicture;
>     httpRequest.open('GET', url, true);
>     httpRequest.send(null);
> 
> }
> 
> function loadPicture()
> {
     document.getElementById("indicator").style.display = "none";
     document.getElementById("big_img").style.display = "inline";
>     var xml = httpRequest.responseXML;
> 
...

Posted via RSDN NNTP Server 2.1 beta

Здравствуйте, ., Вы писали:

.>sendoff wrote:

.>

.>...
>>     httpRequest.onreadystatechange = loadPicture;
>>     httpRequest.open('GET', url, true);
>>     httpRequest.send(null);
>> 
>> }
>> 
>> function loadPicture()
>> {
.>     document.getElementById("indicator").style.display = "none";
.>     document.getElementById("big_img").style.display = "inline";
>>     var xml = httpRequest.responseXML;
>> 
.>...
.>

Так вообще индикатора нет. Блин, голову уже сломал...

sendoff wrote:

> Так вообще индикатора нет. Блин, голову уже сломал...
А куда он делся? Ты чего наменял? Я предложил переставить код для скрытия индикатора в событие по приходу ответа.

Posted via RSDN NNTP Server 2.1 beta

Здравствуйте, здравствуйте, Вы писали:

.>sendoff wrote:


     httpRequest.onreadystatechange = loadPicture;
     httpRequest.open('GET', url, true);
     httpRequest.send(null);
 
 }
 
 function loadPicture()
 {
     document.getElementById("indicator").style.display = "none";
     document.getElementById("big_img").style.display = "inline";
     var xml = httpRequest.responseXML;

ajax только подгрузит src-text как я понимаю!
изменение стилей нужно вставлять след образом

 function loadPicture()
 { 
  if(httpRequest.readyState == 4){
    document.getElementById("big_img").onload = "changeStyles();";
    ...
    document.getElementById("PictField").src = elem.getElementsByTagName('PICT')[0].text;
    ...
  }
 }
changeStyles()
{
     document.getElementById("indicator").style.display = "none";
     document.getElementById("big_img").style.display = "inline";
}

Здравствуйте, chapluck, Вы писали:

C>Здравствуйте, здравствуйте, Вы писали:

C>изменение стилей нужно вставлять след образом
C>

C> function loadPicture()
C> { 
C>  if(httpRequest.readyState == 4){
C>    document.getElementById("big_img").onload = "changeStyles();";
C>    ...
C>    document.getElementById("PictField").src = elem.getElementsByTagName('PICT')[0].text;
C>    ...
C>  }
C> }
C>changeStyles()
C>{
C>     document.getElementById("indicator").style.display = "none";
C>     document.getElementById("big_img").style.display = "inline";
C>}
C>

Сделал так. Только Вы описались

document.getElementById("PictField").onload = "changeStyles();";

Функция changeStyles(); не вызывается. То есть по окончании загрузки индикатор остается. Видимо где-то в другом месте надо вставлять стручку с onload. Не могу понять, где..

Здравствуйте, sendoff, Вы писали:

S>Здравствуйте, chapluck, Вы писали:
S>Сделал так. Только Вы описались
S>

S>document.getElementById("PictField").onload = "changeStyles();";
S>

а почему тогда big_img прячем! это я так понимаю контейнер

S>Функция changeStyles(); не вызывается. То есть по окончании загрузки индикатор остается. Видимо где-то в другом месте надо вставлять стручку с onload. Не могу понять, где..

попробуйте так(у меня работает)

document.getElementById("PictField").onload = changeStyles;

Здравствуйте, chapluck, Вы писали:

C>попробуйте так(у меня работает)
C>

C>document.getElementById("PictField").onload = changeStyles;
C>

Ура! Чуть сальто назад не сделал, когда всё получилось!

Спасибо большое, chapluck! Вы мне очень помогли!

	От:	sendoff
	Дата:	11.01.08 12:36
	Оценка:

	От:	Аноним
	Дата:	11.01.08 12:53
	Оценка:

	От:	sendoff
	Дата:	11.01.08 13:13
	Оценка:

От:	c-smile	http://terrainformatica.com
Дата:	12.01.08 06:45
Оценка:

	От:	sendoff
	Дата:	12.01.08 14:23
	Оценка:

	От:	chapluck
	Дата:	17.01.08 09:11
	Оценка:

	От:	chapluck
	Дата:	21.01.08 10:22
	Оценка: