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

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

<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 у рисунков, на те, которые в массиве содержатся

А что бы не париться с массивом, можно хранить будущие src в других атрибутах. Только валидатор ругаться будет.
Как то так:

<img src="load.gif" tsrc="preview001.jpg" alt="" />

Теперь что бы не проставлять везде src="load.gif" можно найти все рисунки с атрибутом tsrc и проставить его (src) скриптом.

Ага кажись я понял сам принцип.
Допустим сам код спойлера
представим как <SPOILER>
и того получится так
<SPOILER>
<img src="load.gif" tsrc="preview001.jpg" alt="" />
</SPOILER>
И того получается так
src="load.gif" это картинка каторая сразу подгрузится заместь всех картинок
по другому способу можно src оставить пустым, тоесть так src="" и сделать функция каторая ищет пустые src="" и сама додставляет в них load.gif дабы каждый раз его не вставлять и не увеличивать код в документе.
tsrc="preview001.jpg" это штука в которой хранится ссылка на само изображение, НО сам HTML или PHP не поймет такого атрибута tsrc и пропустит его а вот JS его найдет и поймет что ссылку из tsrc="preview001.jpg" надо вставить в пустой src="".
Но остается второе в сам спойлер ( то по чему будем кликать) надо встройть функцию каторая вызывалабы код который будет искать пустые src и вставлять в низ ссылки из tsrc
Кажись вродебы так как я понял.

Вот нашол такую функцию подгрузки картинок после клика на torrents.ru
там картинки подгружаются после раскрытия спойлера.
а сама картинка и ссылка на неё выгладит так
<a href="imageviev001.jpg" class="postLink"><var class="postImg" title="imageviev001.jpg"> </var></a>
Я вот только немогу понять как тег VAR может показать картинку в титле ведь он просто выделяет текст курсивом и выделения переменных компьютерных программ.

если я не ошибаюсь, то выделение текста курсивом это тег <em>
вы уверены что в теге <var> после загрузки картинки ничего нет? как вы это проверяли?

--edited.
var тоже выделяет курсивом, но в отличных от em целях

<html>
<body>
<var title="http://www.nix.ru/autocatalog/apple_notebook/66704_main.jpg"> </var>
</body>
</html>

Пустое место

у меня нет сейчас возможности проверить как это работает на torrents.ru. покажите содержимое этой функции.

<div class="sp-wrap">
<div class="sp-body" title="Скриншоты"><a href="http://www.radikal.ru" class="postLink"><var class="postImg" title="http://s55.radikal.ru/i147/0901/d6/f8c4b90d073d.jpg">&#10;</var></a><br />
<a href="http://www.radikal.ru" class="postLink"><var class="postImg" title="http://s49.radikal.ru/i125/0901/9f/4b64214eace5.jpg">&#10;</var></a><br />
<a href="http://www.radikal.ru" class="postLink"><var class="postImg" title="http://s57.radikal.ru/i158/0901/f2/0bc2eaf42492.jpg">&#10;</var></a><br />
<a href="http://www.radikal.ru" class="postLink"><var class="postImg" title="http://s48.radikal.ru/i122/0901/c7/8d28b7854ee9.jpg">&#10;</var></a><br />
<a href="http://www.radikal.ru" class="postLink"><var class="postImg" title="http://i062.radikal.ru/0901/b9/9d178f50931a.jpg">&#10;</var></a><br />
<a href="http://www.radikal.ru" class="postLink"><var class="postImg" title="http://s39.radikal.ru/i083/0901/c2/a00800ed7a36.jpg">&#10;</var></a></div>
</div>

Но это канечно не весь код там ещё JS + Qery привязан к нему

Всем кто откликнулся спасиба, свою проблему решил даже лучше чем разчитывал :)