Консультация № 142371
27.08.2008, 05:44
0.00 руб.
0 3 3
Здравствуйте!

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

Подскажите, пожалуйста, как реализовать этот алгоритм, хотя бы в какой стороне копать.

Спасибо большое!

Обсуждение

Неизвестный
27.08.2008, 08:52
общий
27.08.2008, 09:29
это ответ
Здравствуйте, Гергель Константин!

Скрипт в приложении.

Это не моя находка, просто когда-то видел где-то нечно подобное.. К сожалению с утра проверить не успеваю.
Надеюсь, что сработает.

По идее должно работать так:

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

удачи

Приложение:
<script type="text/javascript">
//<![CDATA[
var wait = new Image();
wait.src="wait.gif";
//]]>
</script>
<div id="imgDiv">
<img id="imgw" src="blank.gif" alt="" />
</div>
<div id="loadDiv" style="display:none">
<img id="big" src="blank.gif" onload="if (this.src.indexOf('blank.gif')==-1) document.getElementById('imgw').src=this.src" alt="" />
</div>
<a href="#">
<img onclick="document.getElementById('imgw').src=wait.src; document.getElementById('big').src='bigPicture.jpg';" alt="" src="somepic.jpg" />
</a>
Неизвестный
27.08.2008, 12:56
общий
это ответ
Здравствуйте, Гергель Константин!
Я бы посоветовал вам копать в сторону Ajax - с его помощью легко сделать динамическую подгрузку чего угодно. По моему только так и можно решить вашу проблему. - пока картинка не загружена - показываетсяя индикатор загрузки, когда загрузится- вставляется в место индикатора загрузки, но это на ваше усмотрение - возможностей очень много.
Неизвестный
27.08.2008, 22:31
общий
это ответ
Здравствуйте, Гергель Константин!
Ничуть не преуменьшая значения предыдущих ответов от многоуважаемых экспертов, добавлю, что для дескриптора IMG существует атрибут LOWSRC - это адрес компактной версии изображения, показываемой во время загрузки основного изображения. Вернее, так подразумевается, но ведь Вам никто не мешает подставить в этот атрибут адрес изображения, совсем не похожего на то изображение, которое Вы грузите в браузер. Этим изображением может явиться и индикатор загрузки. Вполне! Другое дело, что если основное изображение грузится очень долго, то индикатор будет проигрываться несколько раз - тогда не совсем понятно, для чего индикаторВ этом случае лучше запустить туда картинку, которая просто "крутится", циклически воспроизводится. Это будет выглядеть вполне эстетично.
Только Ваш индикатор должен быть компактнее основного изображения - и гораздо компактнее. Он должен загружаться практически мгновенно. Иначе смысл пропадает. Соответственно, Вам имеет смысл использовать лишь очень простенькую анимашку, если Вы считаете, что страницы сайта критичны к скоростям доступа пользователей.

Использовать Ajax в данном случае, на мой взгляд, - все равно, что из пушки по воробьям палить. Он призван нести более конструктивную роль в веб-дизайне, нежели просто декоративную. Хотя это лишь мое мнение. Однако поверьте, что приложение таким путем Вы только усложните. Хотя и возможности Вы можете получить более широкие и интересные с точки зрения красоты. :)
С уважением, Товарищ Бородин
Форма ответа