Deferring loading of images on thumbnail blocks

[A.J. Angel]

I am using javascript to hide/show DIV blocks. Now, as you can also see, all the images from both DIV blocks are downloaded even if the second is hidden.

This is the page: http://www.exquisiteangelz.com/galleries/picture/

What I wish to do is defer the loading of the hidden block and make it load the images only when the visitor clicks to display the block in question.

Does someone happen to know if it is possible to defer the loading of images so that they are loaded only when the visitor clicks to view the thumbnail block in question? And if yes, would you be kind enough to provide the code to implement it? I'd appreciate any help.

[cd34]

jquery (or mootools) will likely have a library that does lazy loading or asynchronous loading of images. lazy loading loads the images as they are pulled into the viewport - asynchronous allows the page to load and then loads the images sequentially on the page.

jquery (or mootools) will also allow you to control dom units so that you could have an onclick handler that would populate the <div> with the appropriate html which would then load the images/html.

ajaxrain.com would probably be one source for an addon that would do it.

[A.J. Angel]

jquery (or mootools) will also allow you to control dom units so that you could have an onclick handler that would populate the <div> with the appropriate html which would then load the images/html.

This feature sounds like what I am looking for. How is it called? I have the following javascript code to be able to switch between DIV blocks and the HTML code below is an example of the DIV blocks with thumbnails.

<script type="text/javascript">
function showonlyone(thechosenone) {
	var galleryblock = document.getElementsByTagName("div");
		for(var x=0; x<galleryblock.length; x++) {
			name = galleryblock[x].getAttribute("name");
			if (name == 'galleryblock') {
				if (galleryblock[x].id == thechosenone) {
				galleryblock[x].style.display = 'block';
			}
			else {
			galleryblock[x].style.display = 'none';
			}
		}
	}
}
</script>

<div name="galleryblock" id="galleryblock1" style="display: block;">

<table align="center" cellspacing="5" cellpadding="0">

<tr>


<td><a href="/angel/j/jenny-poussin/">Jenny Poussin</a><br><a href="/galleries/picture/j/jenny-poussin/4/jenny-poussin-exquisite-and-cute-in-sexy-naked-christmas-red-lingerie-strip-tease/"><img src="/galleries/picture/j/jenny-poussin/4/jenny-poussin-exquisite-and-cute-in-sexy-naked-christmas-red-lingerie-strip-tease/preview.jpg" width="150" height="200" border="0"></a></td>
<td><a href="/angel/b/bella-bellini/">Bella Bellini</a><br><a href="/galleries/picture/b/bella-bellini/3/bella-bellini-beautiful-and-cute-in-sexy-christmas-strip-tease-inside-public-store/"><img src="/galleries/picture/b/bella-bellini/3/bella-bellini-beautiful-and-cute-in-sexy-christmas-strip-tease-inside-public-store/preview.jpg" width="150" height="200" border="0"></a></td>
<td><a href="/angel/a/aaliyah-love/">Aaliyah Love</a><br><a href="/galleries/picture/a/aaliyah-love/3/aaliyah-love-cute-in-christmas-lingerie-unwrapping-herself-in-sexy-white-stockings/"><img src="/galleries/picture/a/aaliyah-love/3/aaliyah-love-cute-in-christmas-lingerie-unwrapping-herself-in-sexy-white-stockings/preview.jpg" width="150" height="200" border="0"></a></td>
<td><a href="/angel/a/alexis-texas/">Alexis Texas</a><br><a href="/galleries/picture/a/alexis-texas/3/alexis-texas-looking-cute-sucking-candy-cane-after-naked-christmas-outfit-strip-tease/"><img src="/galleries/picture/a/alexis-texas/3/alexis-texas-looking-cute-sucking-candy-cane-after-naked-christmas-outfit-strip-tease/preview.jpg" width="150" height="200" border="0"></a></td>
<td><a href="/angel/a/alexis-texas/">Alexis Texas</a><br><a href="/galleries/picture/a/alexis-texas/2/alexis-texas-christmas-holiday-naked-red-nightie-and-red-panties-strip-tease/"><img src="/galleries/picture/a/alexis-texas/2/alexis-texas-christmas-holiday-naked-red-nightie-and-red-panties-strip-tease/preview.jpg" width="150" height="200" border="0"></a></td>
<td><a href="/angel/l/lexi-belle/">Lexi Belle</a><br><a href="/galleries/picture/l/lexi-belle/3/lexi-belle-cute-christmas-lingerie-strip-tease-in-sexy-white-fishnet-stockings/"><img src="/galleries/picture/l/lexi-belle/3/lexi-belle-cute-christmas-lingerie-strip-tease-in-sexy-white-fishnet-stockings/preview.jpg" width="150" height="200" border="0"></a></td>
<td><a href="/angel/l/lexi-belle/">Lexi Belle</a><br><a href="/galleries/picture/l/lexi-belle/2/lexi-belle-looking-cute-in-christmas-outfit-strip-tease-with-candy-cane-on-her/"><img src="/galleries/picture/l/lexi-belle/2/lexi-belle-looking-cute-in-christmas-outfit-strip-tease-with-candy-cane-on-her/preview.jpg" width="150" height="200" border="0"></a></td>


</tr>

</table>

</div>

[cd34]

Their online documentation is superb for being an open source product:

http://docs.jquery.com/Main_Page

However, I wouldn't be surprised if you couldn't find an addon that someone has already written at http://www.ajaxrain.com/ or http://plugins.jquery.com/

[A.J. Angel]

Originally Posted by cd34

Their online documentation is superb for being an open source product:

http://docs.jquery.com/Main_Page

However, I wouldn't be surprised if you couldn't find an addon that someone has already written at http://www.ajaxrain.com/ or http://plugins.jquery.com/

I found the lazy loading plug-in that would load images only when they are nearly scrolled to or displayed on the screen. But since the DIV switch is at the bottom of the block, it is no use for me since when changing DIV blocks, visitors are not returned to the top of the page.

[MadCat]

If you have the div show up on a click, you want to do this, if you are using jQuery:

$('#id-for-the-link').click(function() {
// do div showing here
return false;
});

The 'false' will not process the link that goes to '#' which is what yoinks you back to the top of the page.

[MadCat]

Optionally throw me a link to the page in PM and I'll hack it over to jQuery for you

[Simon]

the DIV switch is at the bottom of the block, it is no use for me since when changing DIV blocks, visitors are not returned to the top of the page

A.J., you may want to rethink the idea of not returning the surfer to the top of the page. Some surfers won't even notice the changes and will leave thinking that's all there is. Return them to the top, and add a second switch control link at the top too, and you'll have more surfers sticking around I think.

[A.J. Angel]

Originally Posted by MadCat

Optionally throw me a link to the page in PM and I'll hack it over to jQuery for you

I do not use jQuery. I only use javascript for the DIV block switch.

Here is the link: http://www.exquisiteangelz.com/galleries/picture/

[A.J. Angel]

Originally Posted by Simon

A.J., you may want to rethink the idea of not returning the surfer to the top of the page. Some surfers won't even notice the changes and will leave thinking that's all there is. Return them to the top, and add a second switch control link at the top too, and you'll have more surfers sticking around I think.

I wish so but I am not a savvy coder especially anything else that HTML and CSS. So telling me to do this or that in javascript, PHP, it's like Chinese for me.