Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Подгрузка изображений по клику (https://javascript.ru/forum/misc/3503-podgruzka-izobrazhenijj-po-kliku.html)

CompModdd 27.04.2009 16:59

Подгрузка изображений по клику
 
Здраствуйте ув. эксперты, помогите решить проблему.
Есть вот штука похожая на спойлер
<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 картинок будет подгружаться при загрузке страници это ужасная нагрузка будет как на сервер так и клиенту.
ПОЖАЛУЙСТА помогите решить проблему.

AzriMan 28.04.2009 10:32

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

в кратце: вы создаете пустой див, и назначаете ему событие onclick=func(), при клике вызовется func, которая отошлет xmlhttprequest запрос на php/cgi скрипт, который, в свою очередь, вернет соответствующий контент для того или иного div-`а. таким образом - сперва грузятся 40 пустых div-блоков. и при клике - они заполняются.

Gvozd 28.04.2009 10:43

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

соответсвенно, при открытии спойлера, пробегаем по всем картинкам в спойлере, выставляя им необходимые src

AzriMan 28.04.2009 14:19

Gvozd,
о. тоже очень хорошее решение! не сообразил )

CompModdd 28.04.2009 17:42

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

Gvozd 28.04.2009 18:12

Цитата:

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

мог бы написать. 20 WMZ
Цитата:

Сообщение от CompModdd
Извените если канечно это вам нагло показалось, а сам я в javascript нуб.

показалось.извиняю

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

CompModdd 28.04.2009 21:16

Нук давайте будем пробовать, может действительно стану JS програмистом :))

Gvozd 28.04.2009 21:31

жду более конкретных вопросов, и/или кусков вашего кода по попытке решить задачу.

CompModdd 29.04.2009 02:27

Цитата:

Сообщение от Gvozd (Сообщение 17827)
жду более конкретных вопросов, и/или кусков вашего кода по попытке решить задачу.

Так как я нуб в JS буду начинасть с элементарного.
собсно вопрос. для того чтобы подгружать картинки только после того как спойлер развернется что нам нужно редактировать сам спойлер или то что внутри спойлера тоесть превиюшка картинки.

Gvozd 29.04.2009 03:48

Цитата:

Сообщение от CompModdd
собсно вопрос. для того чтобы подгружать картинки только после того как спойлер развернется что нам нужно редактировать сам спойлер или то что внутри спойлера тоесть превиюшка картинки.

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


Часовой пояс GMT +3, время: 10:50.