Отправлено: Niksen от 06 Февраля 2007, 01:02:17
Подсобите с такой задачей. Вот я по определенному событию загружаю в DIV картинку с помощью innerHTML:
document.getElementById("tratata").innerHTML="
Картинка большая и грузится долго. Подскажите, как мне выводить надпись в этот DIV, например "Подождите, идет загрузка..." до того момента, пока картинка не подгрузится полностью?
Вариант делать предзагрузку картинки вместе с остальной страницей и не париться - не подходит - так как таких картинок очень много, а юзеру могут понадобиться из них только несколько.
Заранее спасибо за помощь.
Отправлено: CGVictor от 06 Февраля 2007, 01:05:47
В поиск по форуму, несколько раз обсуждали.
[off]1) показать div / изменить innerHTML / создать элемент
2) объект Image для предзагрузки
3) убрать надпись, показать картинку [/off]
Отправлено: Niksen от 06 Февраля 2007, 01:16:43
Может, вынесете ссылку в FAQ?
Нашел
http://forums.webscript.ru/showthread.php?s=&threadid=25222&msgnum=3
Отправлено: Egorsha от 06 Февраля 2007, 11:59:22
Отправлено: andymc от 06 Февраля 2007, 15:36:54
Отправлено: CGVictor от 06 Февраля 2007, 20:31:55
Госспади, народ, вы о чем вообще?? Какой аякс, какой флеш??
Логика вот такого уровня -
[off]document.getElementById("tratata").innerHTML="Pls wait";
img = new Image();
img.src=\'big.jpg\';
img.onLoad = function {document.getElementById("tratata").innerHTML="
"};[/off]* Код, ессно, просто от руки написан.
Отправлено: Niksen от 06 Февраля 2007, 21:31:48
document.getElementById ("tratata").innerHTML="
onLoad тут не катит - по отношению к блоку он сработывает сразу, как только текст помещается в блок - и не ждет полной загрузки всех картинок. И что делать в таком случае?
Отправлено: CGVictor от 07 Февраля 2007, 00:44:09
Зачем по отношению к блоку? Он тут ни при чем.
Создай сначала (по внешнему событию, я правильно понимаю?) соотв. объекты для предзагрузки, а потом выводи в блок. Как вариант - поставить именованные img-заглушки, а в функции onLoad заменять на нормальное содержимое.
Отправлено: Egorsha от 07 Февраля 2007, 17:48:31
Если отлеживать загрузку, выводить надпись в блок и в блоке может быть что угодно (куча картинок), то я бы воспользовался AJAX. (Русские кодировки и кэширование - другой вопрос, но решаемый)
Вот такое решение могу предложить (как пример):
Тут будет картинка и текст
Файлы test.php, test.htm - одинаковые
blah-blah-blah
blah-blah-blah
Отправлено: CGVictor от 07 Февраля 2007, 23:16:41
И вот теперь пойми, что же сделает твой код.
А потом прочитай задачу. Еще раз.
Какое отношение весь твой аякс имеет к задаче предзагрузки самой картинки?
Абзац, б...
Отправлено: Egorsha от 08 Февраля 2007, 14:06:56
Цитировать
Niksen:
1. ...по определенному событию загружаю в DIV картинку с помощью innerHTML...
2. ... выводить надпись в этот DIV, например "Подождите, идет загрузка..." до того момента, пока картинка не подгрузится полностью...
3. ...Вариант делать предзагрузку картинки вместе с остальной страницей и не париться - не подходит...
4. ...(потом уточнил задачу) У меня есть НЕСКОЛЬКо картинок, не одна. Все это пишется в блок...
Тот пример, который привел, все эти 4 пункта учитывает.
К задаче предзагрузки самой картинки приведенный мой код, видимо, имеет такое же отношение, как "задача предзагрузки" к поставленной задаче. (Но мне эти "отношения" как-то не особо интересны.)
Отправлено: CGVictor от 08 Февраля 2007, 23:15:34
Вот ты же сам и написал всё уже.
Ладно, объясню по-другому: человеку нужно показать текстовую заглушку на время, пока грузится полное изображение.
Зачем аяксом запрашивать кусок html, который все равно потом вызовет загрузку полного изображения с теми же тормозами?
Отправлено: Egorsha от 09 Февраля 2007, 15:51:59
Видимо эту задачу каждый из нас понимает по разному. Скорее всего из-за того, что один момент в формулировке требует уточнения. А именнно, нужно ли для первичного отображения страницы чтобы эта картинка, или картинки, в DIV отображались сразу. Или отображать их только тогда, когда этого захочет юзер (и инициализирует "определенное событие").
Вот в последнем случае я и предлагал AJAX. Если юзеру не нужно, то ничего не грузится, а если сам захотел, то пусть ждет когда загрузится, а в DIV до окончания загрузки будет висеть текстовая заглушка - "Подождите...". Причем callback-функция в методе onreadystatechange корректно отловит момент окончания загрузки и поменяет "загрушку" на то, что загрузили по HTTP-запросу. Причем в DIV можно загрузить любой HTML код, а не просто одну картинку
И честно говоря, не понял какие из-за аякса появятся тормоза при загрузке полного изображения? Думаю, наоборот - тормозов будет меньше, так как грузится только то, что нужно юзеру.
Если человеку нужно было показать текстовую заглушку - то она есть в приведенном выше коде - ее делает callback-функция. Прчем она корректно отлавливает момент окончания загрузки.
Отправлено: CGVictor от 10 Февраля 2007, 00:50:02
Цитировать
Egorsha:
в DIV до окончания загрузки будет висеть текстовая заглушка
В твоем случае в div будет висеть заглушка до окончания работы аякса (который выплевывает html со вставкой img), а потом еще и непонятно что до загрузки самой картинки (напомню, цитируя автора: "картинка большая и грузится долго").
Ему именно вторую часть и надо исправить.
Впрочем, пустопорожние прения тут мне, честно говоря, надоели. Я свое слово сказал, автора - милости прошу.
[off]Всем чмоки в этом чати.[/off]
Отправлено: Egorsha от 12 Февраля 2007, 09:28:34
Отправлено: Niksen от 12 Февраля 2007, 21:48:28
Всем спасибо!