Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Aug 2006
    Posts
    26
    Thanks
    0
    Thanked 0 Times in 0 Posts

    load images dynamically without preloading

    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:

    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:

    Code:
    <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?

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,511
    Thanks
    3
    Thanked 504 Times in 491 Posts
    Code:
    <!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>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •