Автор Тема: innerHTML и надпись, которую нужно выводить до окончания загрузки (Прочитано 10577 раз)

Niksen · « : 06 Февраля 2007, 01:02:17 »

Здравствуйте!
Подсобите с такой задачей. Вот я по определенному событию загружаю в DIV картинку с помощью innerHTML:

document.getElementById("tratata").innerHTML=""

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

Заранее спасибо за помощь.

CGVictor · « **Ответ #1 :** 06 Февраля 2007, 01:05:47 »

Niksen
В поиск по форуму, несколько раз обсуждали.

[off]1) показать div / изменить innerHTML / создать элемент
2) объект Image для предзагрузки
3) убрать надпись, показать картинку [/off]

Niksen · « **Ответ #2 :** 06 Февраля 2007, 01:16:43 »

Искал. Не нашел... Может, где-то и есть, но составить правильный запрос для поиска трудно.
Может, вынесете ссылку в FAQ?

Нашел
http://forums.webscript.ru/showthread.php?s=&threadid=25222&msgnum=3

Egorsha · « **Ответ #3 :** 06 Февраля 2007, 11:59:22 »

А ассинхронные запросы (AJAX) если попробовать?

andymc · « **Ответ #4 :** 06 Февраля 2007, 15:36:54 »

В общую кучу добавлю ещё вариант с Flash. Там как раз есть средства подсчёта кол-ва загруженных байтов.

CGVictor · « **Ответ #5 :** 06 Февраля 2007, 20:31:55 »

andymc Egorsha
Госспади, народ, вы о чем вообще?? Какой аякс, какой флеш??

Логика вот такого уровня -
[off]document.getElementById("tratata").innerHTML="Pls wait";
img = new Image();
img.src=\'big.jpg\';
img.onLoad = function {document.getElementById("tratata").innerHTML="

"};[/off]

* Код, ессно, просто от руки написан.

Niksen · « **Ответ #6 :** 06 Февраля 2007, 21:31:48 »

Я изначально немного некорректно задачу сформулировал. У меня есть НЕСКОЛЬКо картинок, не одна. Все это пишется в блок:

document.getElementById ("tratata").innerHTML="..."

onLoad тут не катит - по отношению к блоку он сработывает сразу, как только текст помещается в блок - и не ждет полной загрузки всех картинок. И что делать в таком случае?

CGVictor · « **Ответ #7 :** 07 Февраля 2007, 00:44:09 »

Niksen
Зачем по отношению к блоку? Он тут ни при чем.
Создай сначала (по внешнему событию, я правильно понимаю?) соотв. объекты для предзагрузки, а потом выводи в блок. Как вариант - поставить именованные img-заглушки, а в функции onLoad заменять на нормальное содержимое.

Egorsha · « **Ответ #8 :** 07 Февраля 2007, 17:48:31 »

Niksen

Если отлеживать загрузку, выводить надпись в блок и в блоке может быть что угодно (куча картинок), то я бы воспользовался AJAX. (Русские кодировки и кэширование - другой вопрос, но решаемый)
Вот такое решение могу предложить (как пример):

<html>
<head>
<script type="text/javascript">
function createRequestObject() {
    var request = null;
    if(!request) try {
        request=new ActiveXObject(\'Msxml2.XMLHTTP\');
    } catch (e){}
    if(!request) try {
        request=new ActiveXObject(\'Microsoft.XMLHTTP\');
    } catch (e){}
    if(!request) try {
        request=new XMLHttpRequest();
    } catch (e){}
    return request;
}
function getAjax(data, div)
{

var request = createRequestObject();

if(!request) return false;

else
    {
     var obj=document.getElementById(div);
     request.open("GET",  data);
     request.onreadystatechange  = function ()
         {
           if  (request.readyState  ==  4  &&  request.status  ==  200)
             {
               obj.innerHTML  =  request.responseText;
              }
          else obj.innerHTML=\'Подождите, идет загрузка...\';

          }
     request.send(null);
     return true;
   }
}
</script>
</head>
<body>
<div id=tratata>
Тут будет картинка и текст
</div>
<button onclick="getAjax(\'test.htm\',\'tratata\');">загрузить HTML</button>

<button onclick="getAjax(\'test.php?t=\'+Math.random(),\'tratata\');">загрузить PHP</button>
</body>
</html>

Файлы test.php, test.htm - одинаковые

<p>blah-blah-blah
<p><img src=test.jpg>
<p>blah-blah-blah

CGVictor · « **Ответ #9 :** 07 Февраля 2007, 23:16:41 »

Egorsha
И вот теперь пойми, что же сделает твой код.
А потом прочитай задачу. Еще раз.

Какое отношение весь твой аякс имеет к задаче предзагрузки самой картинки?

Абзац, б...

Egorsha · « **Ответ #10 :** 08 Февраля 2007, 14:06:56 »

Ок. Еще раз о задаче:

Цитировать

Niksen:
1. ...по определенному событию загружаю в DIV картинку с помощью innerHTML...
2. ... выводить надпись в этот DIV, например "Подождите, идет загрузка..." до того момента, пока картинка не подгрузится полностью...
3. ...Вариант делать предзагрузку картинки вместе с остальной страницей и не париться - не подходит...
4. ...(потом уточнил задачу) У меня есть НЕСКОЛЬКо картинок, не одна. Все это пишется в блок...

Тот пример, который привел, все эти 4 пункта учитывает.

К задаче предзагрузки самой картинки приведенный мой код, видимо, имеет такое же отношение, как "задача предзагрузки" к поставленной задаче. (Но мне эти "отношения" как-то не особо интересны.)

CGVictor · « **Ответ #11 :** 08 Февраля 2007, 23:15:34 »

Egorsha
Вот ты же сам и написал всё уже.

Ладно, объясню по-другому: человеку нужно показать текстовую заглушку на время, пока грузится полное изображение.
Зачем аяксом запрашивать кусок html, который все равно потом вызовет загрузку полного изображения с теми же тормозами?

Egorsha · « **Ответ #12 :** 09 Февраля 2007, 15:51:59 »

CGVictor

Видимо эту задачу каждый из нас понимает по разному. Скорее всего из-за того, что один момент в формулировке требует уточнения. А именнно, нужно ли для первичного отображения страницы чтобы эта картинка, или картинки, в DIV отображались сразу. Или отображать их только тогда, когда этого захочет юзер (и инициализирует "определенное событие").
Вот в последнем случае я и предлагал AJAX. Если юзеру не нужно, то ничего не грузится, а если сам захотел, то пусть ждет когда загрузится, а в DIV до окончания загрузки будет висеть текстовая заглушка - "Подождите...". Причем callback-функция в методе onreadystatechange корректно отловит момент окончания загрузки и поменяет "загрушку" на то, что загрузили по HTTP-запросу. Причем в DIV можно загрузить любой HTML код, а не просто одну картинку .
И честно говоря, не понял какие из-за аякса появятся тормоза при загрузке полного изображения? Думаю, наоборот - тормозов будет меньше, так как грузится только то, что нужно юзеру.

Если человеку нужно было показать текстовую заглушку - то она есть в приведенном выше коде - ее делает callback-функция. Прчем она корректно отлавливает момент окончания загрузки.

CGVictor · « **Ответ #13 :** 10 Февраля 2007, 00:50:02 »

Egorsha

Цитировать

Egorsha:
в DIV до окончания загрузки будет висеть текстовая заглушка

В твоем случае в div будет висеть заглушка до окончания работы аякса (который выплевывает html со вставкой img), а потом еще и непонятно что до загрузки самой картинки (напомню, цитируя автора: "картинка большая и грузится долго").
Ему именно вторую часть и надо исправить.

Впрочем, пустопорожние прения тут мне, честно говоря, надоели. Я свое слово сказал, автора - милости прошу.
[off]Всем чмоки в этом чати.[/off]

Egorsha · « **Ответ #14 :** 12 Февраля 2007, 09:28:34 »

Мне тоже надоело эту тему обсуждать, да и автор ,видимо, потерял интерес к этой теме.

Новости:

Автор Тема: innerHTML и надпись, которую нужно выводить до окончания загрузки (Прочитано 10577 раз)