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.

[CodeR70]

Can you not only create the image place holders and set the ID attribs but dont specify the SRC yet? Then when u show the DIV also set the SRC for each image which then loads the images. I'm sure if u check out jQuery u can this.

[A.J. Angel]

Originally Posted by CodeR70

Can you not only create the image place holders and set the ID attribs but dont specify the SRC yet? Then when u show the DIV also set the SRC for each image which then loads the images. I'm sure if u check out jQuery u can this.

I honestly do not know. That is why I am asking for help on the matter.

[symtab]

Hi,

Dont assign a image to the div yet, once someone clicks on the link (or div) add the image via jquery:

$(document).ready(function() {
$("#div_id").click(
$("#div_id").html('<img src="/path/to/image.jpg" alt="" />');
);
});

Good luck!

[A.J. Angel]

Originally Posted by symtab

Hi,

Dont assign a image to the div yet, once someone clicks on the link (or div) add the image via jquery:

$(document).ready(function() {
$("#div_id").click(
$("#div_id").html('<img src="/path/to/image.jpg" alt="" />');
);
});

Good luck!

Hi symtab, it's not one image only. It's a table of thumbnails. Here's the javascript code that I use to switch between the DIV blocks:

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

And this is the table of thumbnails wrapped between DIV tags with the ID to swich between them:

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

[CodeR70]

I think its best to load up your images URLs and IDs in an array and then use the jQuery method as displayed to loop through the array and set the images/html. More advanced would be to have the image URL be served and processed using AJAX.

[A.J. Angel]

Originally Posted by CodeR70

I think its best to load up your images URLs and IDs in an array and then use the jQuery method as displayed to loop through the array and set the images/html. More advanced would be to have the image URL be served and processed using AJAX.

LOL! That's too advance for me in words! Would it be possible for you to provide an example code for me to work from? I'm not a savvy coder.

[CodeR70]

Originally Posted by A.J. Angel

LOL! That's too advance for me in words! Would it be possible for you to provide an example code for me to work from? I'm not a savvy coder.

I'm in fact thinking now that it would be easier to "load" the whole image block html content (everything between the div). Take a look at the jQuery example of symtab. The html he's including there is just a single tag, but you can include the complete DIV content you have as well.

That would be something like:

$(document).ready(function() {
$("#clicker_id").click(
$("#galleryblock1").html('<table........</table>');
);
});

But it's a lot of HTML code that needs to be included and I'm not into jQuery yet to know if there is a better way to include such a huge block of html code.

I do not know how good you are but you should check out http://jquery.com/. Check out the examples as well, it might give you some ideas.

[CodeR70]

Originally Posted by CodeR70

But it's a lot of HTML code that needs to be included and I'm not into jQuery yet to know if there is a better way to include such a huge block of html code.

Here at the examples you see how you can load the content from a different file.

[A.J. Angel]

Thanks! I'll give that one a try.

[CodeR70]

Originally Posted by A.J. Angel

Thanks! I'll give that one a try.

If you cant get it to work I will try to create an example for you. Just let me know.