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