...
PDA

load images dynamically without preloading

FlipperBizkut
08-31-2006, 05:03 PM
Lets say I have 5 images that I would like to show thumbnails for. When these thumbnails are clicked, a div with display set to 'none' should have its display set to 'block'. Within that newly visible div, should be the full sized image.

I have all that completed successfully. In fact, I have it set up to where it matters not how many images and all that. Here is the code:


function switchView(id) {
makeHidden(id);
showElement(id);
}

function makeHidden(id) {
var menu = document.getElementById('pictures');
var menuSubLists = menu.getElementsByTagName('div');
for (var i = 0 ; i < menuSubLists.length; i++){
var cycleMenuSubLists = menu.getElementsByTagName('div')[i];
if ((cycleMenuSubLists.getAttribute('id') != null) && (cycleMenuSubLists.getAttribute('id') != id)) {
hideElement(cycleMenuSubLists.getAttribute('id'));
}
}
}

function showElement(id) {
document.getElementById(id).style.display = document.getElementById(id).style.display == 'block' ? 'none' : 'block';
}

function hideElement(id) {
document.getElementById(id).style.display = 'none';
}

function switchLinks() {
if (document.getElementById) {
var menu = document.getElementById('pictures');
var menuItems = menu.getElementsByTagName('a');
for (var i = 0; i < menuItems.length; i++) {
var cycleMenuItems = menu.getElementsByTagName('a')[i];
if (cycleMenuItems.getAttribute('id') != null) {
cycleMenuItems.setAttribute('href', "javascript:switchView('" + cycleMenuItems.getAttribute('id') + "_sub');")
}
}
}
}

window.onload = switchLinks


the html:


<div id="pictures" align="center">
<a id="pic1" href="./dragon_3_1.htm"><img src="./Dragon_3_1_t.jpg" alt="" /></a>
<a id="pic2" href="./dragon_3_2.htm"><img src="./Dragon_3_2_t.jpg" alt="" /></a><br /><br />
<a id="pic3" href="./dragon_3_3.htm"><img src="./Dragon_3_3_t.jpg" alt="" /></a>
<a id="pic4" href="./dragon_3_4.htm"><img src="./Dragon_3_4_t.jpg" alt="" /></a>
<a id="pic5" href="./dragon_3_5.htm"><img src="./Dragon_3_5_t.jpg" alt="" /></a>
<div id="pic1_sub">
<img src="Dragon_3_1.jpg" alt="" />
</div>
<div id="pic2_sub">
<img src="Dragon_3_2.jpg" alt="" />
</div>
<div id="pic3_sub">
<img src="Dragon_3_3.jpg" alt="" />
</div>
<div id="pic4_sub">
<img src="Dragon_3_4.jpg" alt="" />
</div>
<div id="pic5_sub">
<img src="Dragon_3_5.jpg" alt="" />
</div>
</div>



The problem with this method is that all the fullsized images will be preloaded. This could cause long load times for slower connections, and possibly wasted bandwith if only part (or none) of the images are clicked for voewing of the full sized images.

What I want to do is basically the same thing as above but without preloading the fullsized images. Is there any way to do that?
vwphillips
08-31-2006, 06:16 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--

// to initialise
// Init('pictures','Link','StdImages','StdImages');
// where
// parameter 0 = the unique ID name if the parent. (string)
// parameter 1 = the class name of the images to add links. (string)
// parameter 2 = the directory holding the small images. (string)
// parameter 3 = the directory holding the large images. (string)

function Init(id,cls,small,large){
var p=document.getElementById(id);
p.ary=[];
var cnt=0;
var imgs=p.getElementsByTagName('IMG');
for (var zxc0=0;zxc0<imgs.length;zxc0++){
if (imgs[zxc0].className==cls){
p.ary[cnt]=[imgs[zxc0]];
for (var zxc1=zxc0+1;zxc1<imgs.length;zxc1++){
nme=imgs[zxc0].src.substring(imgs[zxc0].src.lastIndexOf('/')+1);
if (imgs[zxc1].title.match(nme)){
imgs[zxc1].title=imgs[zxc1].title.replace(nme,'');
if (imgs[zxc1].title.length<1){ imgs[zxc1].removeAttribute('title'); }
p.ary[cnt][1]=imgs[zxc1];
p.ary[cnt][2]=imgs[zxc1].src.replace(small,large);
imgs[zxc1].style.display='none';
cnt++;
break;
}
}
}
}
}

function SwitchImg(){
var zxcevt=window.event||arguments.callee.caller.arguments[0];
var zxcobj=zxcEventObj(zxcevt);
var ary=zxcobj;
while(ary.parentNode){
if (ary.ary){ ary=ary.ary; break; }
ary=ary.parentNode;
}
for (var zxc0=0;zxc0<ary.length;zxc0++){
if (ary[zxc0][0]!=zxcobj){
ary[zxc0][1].style.display='none';
}
else{
ary[zxc0][1].src=ary[zxc0][2];
ary[zxc0][1].style.display=(ary[zxc0][1].style.display=='none')?'':'none';
}
}
}

function zxcEventObj(zxce){
if (!zxce) var zxce=window.event;
zxce.cancelBubble=true;
if (zxce.stopPropagation) zxce.stopPropagation();
if (zxce.target) zxceobj=zxce.target;
else if (zxce.srcElement) zxceobj=zxce.srcElement;
if (zxceobj.nodeType==3) zxceobj=zxceobj.parentNode;
return zxceobj;
}



//-->
</script></head>

<body onload="Init('pictures','Link','StdImages','StdImages');Init('pictures2','Link','StdImages','StdImages');" >
<div id="pictures" align="center" onclick="SwitchImg();">
<img class="Link" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" alt="" width="100" height="50" />
<img class="Link" src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" alt="" width="100" height="50" /><br /><br />
<img class="Link" src="http://www.vicsjavascripts.org.uk/StdImages/Three.gif" alt="" width="100" height="50" />
<img class="Link" src="http://www.vicsjavascripts.org.uk/StdImages/Four.gif" alt="" width="100" height="50" />
<img class="Link" src="http://www.vicsjavascripts.org.uk/StdImages/Five.gif" alt="" width="100" height="50" />
<br>
<img title="One.gif" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" alt="" />
<img title="Two.gif" src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" alt="" />
<img title="Three.gif" src="http://www.vicsjavascripts.org.uk/StdImages/Three.gif" alt="" />
<img title="Four.gif" src="http://www.vicsjavascripts.org.uk/StdImages/Four.gif" alt="" />
<img title="Five.gif" src="http://www.vicsjavascripts.org.uk/StdImages/Five.gif" alt="" />
</div>

<div id="pictures2" align="center" onclick="SwitchImg();">

<img class="Link" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" alt="" width="100" height="50" />
<img class="Link" src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" alt="" width="100" height="50" /><br /><br />
<img class="Link" src="http://www.vicsjavascripts.org.uk/StdImages/Three.gif" alt="" width="100" height="50" />
<img class="Link" src="http://www.vicsjavascripts.org.uk/StdImages/Four.gif" alt="" width="100" height="50" />
<img class="Link" src="http://www.vicsjavascripts.org.uk/StdImages/Five.gif" alt="" width="100" height="50" />
<br>
<img title="One.gif" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" alt="" />
<img title="Two.gif" src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" alt="" />
<img title="Three.gif" src="http://www.vicsjavascripts.org.uk/StdImages/Three.gif" alt="" />
<img title="Four.gif" src="http://www.vicsjavascripts.org.uk/StdImages/Four.gif" alt="" />
<img title="Five.gif" src="http://www.vicsjavascripts.org.uk/StdImages/Five.gif" alt="" />
</div>
</body>

</html>

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum