Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 27.04.2009, 16:59
Интересующийся
Отправить личное сообщение для CompModdd Посмотреть профиль Найти все сообщения от CompModdd
 
Регистрация: 27.04.2009
Сообщений: 15

Подгрузка изображений по клику
Здраствуйте ув. эксперты, помогите решить проблему.
Есть вот штука похожая на спойлер
<span><div class="morehead" onclick="obj=this.parentNode.childNodes[1].style; tmp=(obj.display!='block') ? 'block' : 'none'; obj.display=tmp;
var o=this.getElementsByTagName('img')[0];if(!o._src){o._src=o.src;o.src='style_images/DOPOLNITLbNO/minus.gif';}else{var x=o.src;o.src=o._src;o._src=x;};return false;
"> <img src="style_images/DOPOLNITLbNO/plus.gif" /> <b>Скрытая информация...</b></div><div class="moretext" style="display: none;">

<a href="http://192.168.101.15:81/tale-25.jpg" target="_blank"><img src="http://192.168.101.15:81/111/tale-25.jpg" border="0" class="linked-image" /></a>
<a href="http://192.168.101.15:81/tale-255.jpg" target="_blank"><img src="http://192.168.101.15:81/111/tale-255.jpg" border="0" class="linked-image" /></a>

</div></span>


и ксс до него

Код:
.morehead      {  background: #E9E9E6; font-weight: 11px; cursor: pointer; display: block; width: 100%; height: 100%;  text-align: left; text-decoration: none; margin: auto; width: 97%; border: solid #C3CBD1; border-width: 1px 1px 1px 2px;}
.moretext      { font-weight: normal; background: #F5F5F5; margin: auto; width: 97%; border: solid #C3CBD1; border-width: 1px 1px 1px 2px;}
Вопрос в том как сделать чтобы при загрузке страници картинки находящиеся в этом блоке не подгружались сразу. а только тогда када развернёш блок тогда и подгрузятся превьюшки. Изображений в данном блоке может находится до 100 штук а на странице может быть до 40 таких блоков и если взять по максемуму то это 4000 картинок будет подгружаться при загрузке страници это ужасная нагрузка будет как на сервер так и клиенту.
ПОЖАЛУЙСТА помогите решить проблему.
Ответить с цитированием
  #2 (permalink)  
Старый 28.04.2009, 10:32
Профессор
Отправить личное сообщение для AzriMan Посмотреть профиль Найти все сообщения от AzriMan
 
Регистрация: 27.02.2009
Сообщений: 215

это реализуется с помощью AJAX-a

в кратце: вы создаете пустой див, и назначаете ему событие onclick=func(), при клике вызовется func, которая отошлет xmlhttprequest запрос на php/cgi скрипт, который, в свою очередь, вернет соответствующий контент для того или иного div-`а. таким образом - сперва грузятся 40 пустых div-блоков. и при клике - они заполняются.
Ответить с цитированием
  #3 (permalink)  
Старый 28.04.2009, 10:43
Аватар для Gvozd
Матрос
Отправить личное сообщение для Gvozd Посмотреть профиль Найти все сообщения от Gvozd
 
Регистрация: 04.04.2008
Сообщений: 6,233

AzriMan,
Ajax тут не обязателен, ИМХО.
можно например верстку содержимого каждого из блоко хранить не там, где ему предполагается быть, а глобальной переменной.
при отображении спойлера соответсвенно подставляем в него его содержимое, и в нем начинают грузится картинки
либо как альтернатива, никуда не деваем содержимое спойлера, а в рисунки, по умолчанию выставляем пустой src
и держим в глобальной области видимости массив
spoiler_pic[id_spoiler][position_image_in_spoiler]

соответсвенно, при открытии спойлера, пробегаем по всем картинкам в спойлере, выставляя им необходимые src
Ответить с цитированием
  #4 (permalink)  
Старый 28.04.2009, 14:19
Профессор
Отправить личное сообщение для AzriMan Посмотреть профиль Найти все сообщения от AzriMan
 
Регистрация: 27.02.2009
Сообщений: 215

Gvozd,
о. тоже очень хорошее решение! не сообразил )
Ответить с цитированием
  #5 (permalink)  
Старый 28.04.2009, 17:42
Интересующийся
Отправить личное сообщение для CompModdd Посмотреть профиль Найти все сообщения от CompModdd
 
Регистрация: 27.04.2009
Сообщений: 15

Gvozd если вам не составит труда, моли бы вы написать этак сказать готовый вариант.
Извените если канечно это вам нагло показалось, а сам я в javascript нуб.
Ответить с цитированием
  #6 (permalink)  
Старый 28.04.2009, 18:12
Аватар для Gvozd
Матрос
Отправить личное сообщение для Gvozd Посмотреть профиль Найти все сообщения от Gvozd
 
Регистрация: 04.04.2008
Сообщений: 6,233

Сообщение от CompModdd
Gvozd если вам не составит труда, моли бы вы написать этак сказать готовый вариант.
мог бы написать. 20 WMZ
Сообщение от CompModdd
Извените если канечно это вам нагло показалось, а сам я в javascript нуб.
показалось.извиняю

PS также я бесплатно проконсультирую, если вы решите сами написать.
спрашивайте уточняющие вопросы, пишите, творите, пробуйте. И станете в JS вы кем-то большим, чем нубом.
Если не нравится такой вариант самостоятельного труда с моей помощью, мои условия выше
Ответить с цитированием
  #7 (permalink)  
Старый 28.04.2009, 21:16
Интересующийся
Отправить личное сообщение для CompModdd Посмотреть профиль Найти все сообщения от CompModdd
 
Регистрация: 27.04.2009
Сообщений: 15

Нук давайте будем пробовать, может действительно стану JS програмистом )
Ответить с цитированием
  #8 (permalink)  
Старый 28.04.2009, 21:31
Аватар для Gvozd
Матрос
Отправить личное сообщение для Gvozd Посмотреть профиль Найти все сообщения от Gvozd
 
Регистрация: 04.04.2008
Сообщений: 6,233

жду более конкретных вопросов, и/или кусков вашего кода по попытке решить задачу.
Ответить с цитированием
  #9 (permalink)  
Старый 29.04.2009, 02:27
Интересующийся
Отправить личное сообщение для CompModdd Посмотреть профиль Найти все сообщения от CompModdd
 
Регистрация: 27.04.2009
Сообщений: 15

Сообщение от Gvozd Посмотреть сообщение
жду более конкретных вопросов, и/или кусков вашего кода по попытке решить задачу.
Так как я нуб в JS буду начинасть с элементарного.
собсно вопрос. для того чтобы подгружать картинки только после того как спойлер развернется что нам нужно редактировать сам спойлер или то что внутри спойлера тоесть превиюшка картинки.
Ответить с цитированием
  #10 (permalink)  
Старый 29.04.2009, 03:48
Аватар для Gvozd
Матрос
Отправить личное сообщение для Gvozd Посмотреть профиль Найти все сообщения от Gvozd
 
Регистрация: 04.04.2008
Сообщений: 6,233

Сообщение от CompModdd
собсно вопрос. для того чтобы подгружать картинки только после того как спойлер развернется что нам нужно редактировать сам спойлер или то что внутри спойлера тоесть превиюшка картинки.
самим спойлером вы называете то, по чему мы делаем клик?
редактировать надо содержимое спойлера(то, что сначало невидно)и код, вызываемый щелчком по спойлеру
допустим вы выбрали второй из описанных мною способов реализации(он набиболее оптимален.особенно, если его оптимизировать)
тогда, внутри спойлера, мы остваляем код точно такой же как и был, кроме рисунков.у них свойство src мы оставляем пустым.
как вариант, делаем у всех рисунков src ссылающимся на GIF-ку с анимацией загрузки(типа, подождите)
после щелчка по заголовку спойлера, мы соотетсвенно берем набор рисунков содержащихся в сполере.
берем из глобального массива(структура описана в моем первом посте) ссылки.
и соответсвенно в цикле меняем src у рисунков, на те, которые в массиве содержатся
Ответить с цитированием
Ответ


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
изменение input.value по клику farik Events/DOM/Window 3 13.07.2014 12:15
Плагин для файрфокса - чтение изображений SunnyDay Общие вопросы Javascript 4 28.04.2009 17:30
Скрипт показа уменьшеных изображений greatilya Ваши сайты и скрипты 4 07.04.2009 03:51
проблема со сменой изображений при наведение Jack Элементы интерфейса 0 19.03.2009 22:13
Подгрузка ява скрипта . можно ли AntonPetrovich Общие вопросы Javascript 9 13.10.2008 12:33