Подгрузка изображений по клику
 

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

<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>

и ксс до него

Вопрос в том как сделать чтобы при загрузке страници картинки находящиеся в этом блоке не подгружались сразу. а только тогда када развернёш блок тогда и подгрузятся превьюшки. Изображений в данном блоке может находится до 100 штук а на странице может быть до 40 таких блоков и если взять по максемуму то это 4000 картинок будет подгружаться при загрузке страници это ужасная нагрузка будет как на сервер так и клиенту.
ПОЖАЛУЙСТА помогите решить проблему.

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

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

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

spoiler_pic[id_spoiler][position_image_in_spoiler]

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

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

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

мог бы написать. 20 WMZ
показалось.извиняю

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

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

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

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

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