Индикатор загрузки
От: sendoff  
Дата: 11.01.08 12:36
Оценка:
Пишу веб-приложение на 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";
}

Но индикатор не появляется почему-то. Не подскажите, в чем проблема?
Re: Индикатор загрузки
От: Аноним  
Дата: 11.01.08 12:53
Оценка:
Здравствуйте, 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>
Re[2]: Индикатор загрузки
От: sendoff  
Дата: 11.01.08 13:13
Оценка:
Здравствуйте, Аноним, Вы писали:
А>Может быть слишком быстро выполняется:
S>>    .......
А>
?

Нет, дело не в этом. Я подгружал большие картинки, которые грузились довольно долго, но индикатора так и не было. Но если убрать 2 последние строчки
    document.getElementById("indicator").style.display = "none";
    document.getElementById("big_img").style.display = "inline";

то есть не выводить новую картинку на экран, то результатом будет индикатор.
Re: Индикатор загрузки
От: c-smile Канада http://terrainformatica.com
Дата: 12.01.08 06:45
Оценка:
Здравствуйте, 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 но
как я понимаю у тебя там чего-то другое. Что именно?
Re[2]: Индикатор загрузки
От: sendoff  
Дата: 12.01.08 14:23
Оценка:
Здравствуйте, 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;
        }
    }
}

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

Буду очень признателен за помощь.
Re[3]: Индикатор загрузки
От: . Великобритания  
Дата: 12.01.08 21:23
Оценка:
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
но это не зря, хотя, может быть, невзначай
гÅрмония мира не знает границ — сейчас мы будем пить чай
Re[4]: Индикатор загрузки
От: sendoff  
Дата: 13.01.08 19:35
Оценка:
Здравствуйте, ., Вы писали:

.>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;
>> 
.>...
.>


Так вообще индикатора нет. Блин, голову уже сломал...
Re: Индикатор загрузки
От: sendoff  
Дата: 16.01.08 17:14
Оценка:
^^
Re[5]: Индикатор загрузки
От: . Великобритания  
Дата: 16.01.08 18:11
Оценка:
sendoff wrote:

> Так вообще индикатора нет. Блин, голову уже сломал...
А куда он делся? Ты чего наменял? Я предложил переставить код для скрытия индикатора в событие по приходу ответа.
Posted via RSDN NNTP Server 2.1 beta
но это не зря, хотя, может быть, невзначай
гÅрмония мира не знает границ — сейчас мы будем пить чай
Re[4]: Индикатор загрузки
От: chapluck  
Дата: 17.01.08 09:11
Оценка:
Здравствуйте, здравствуйте, Вы писали:

.>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";
}
Re[5]: Индикатор загрузки
От: sendoff  
Дата: 19.01.08 19:10
Оценка:
Здравствуйте, 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. Не могу понять, где..
Re[6]: Индикатор загрузки
От: chapluck  
Дата: 21.01.08 10:22
Оценка:
Здравствуйте, sendoff, Вы писали:

S>Здравствуйте, chapluck, Вы писали:
S>Сделал так. Только Вы описались
S>
S>document.getElementById("PictField").onload = "changeStyles();";
S>

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

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

попробуйте так(у меня работает)
document.getElementById("PictField").onload = changeStyles;
Re[7]: Индикатор загрузки
От: sendoff  
Дата: 21.01.08 13:32
Оценка:
Здравствуйте, chapluck, Вы писали:

C>попробуйте так(у меня работает)
C>
C>document.getElementById("PictField").onload = changeStyles;
C>


Ура! Чуть сальто назад не сделал, когда всё получилось! Спасибо большое, chapluck! Вы мне очень помогли!
 
Подождите ...
Wait...
Пока на собственное сообщение не было ответов, его можно удалить.