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 2007
    Posts
    25
    Thanks
    1
    Thanked 4 Times in 4 Posts

    Background image loading

    I'm designing a photography website for a friend. One of the things that he's insisting on is that the site load quickly, and not re-load as people move between images. No Flash, either.

    To give an idea of the setup:

    On the gallery screen, there's a strip of 5 thumbnails, with a main viewscreen showing one image full size. As they click on thumbnails, the main image changes, as expected. They can scroll through the thumbnails to select a new picture. Again, nothing fantastic there. I'm planning on using Javascript for this, unless somebody has an alternate suggestion that I haven't considered.

    So, here's the issue:

    He has big, high quality images. He's a photographer, and he wants to highlight his work. Some of his categories have up to 40 photos. We obviously don't want to wait while they all load (and thumbnails) before showing the page. What I would like to have happen is for it to load the first 5 images & thumbnails, and allow the visitor to begin looking at and navigating the page, while the remainder of the images load in the background.

    So, I know what I want, but have no clue how to do it. I only know the basics of Javascript, and it has been ages since I've had to do anything more complex than a popup.

    Does anybody have any suggestions / libraries / tutorials to get me moving in this direction?

    If you happen to know of a good library that will handle the scrolling thumbnails, that would be awesome, too.

    Thanks in advance.

  • #2
    Regular Coder
    Join Date
    Mar 2006
    Posts
    187
    Thanks
    5
    Thanked 0 Times in 0 Posts
    heres something i wrote a little while ago! It works in ie7 and ff 2.0, not checked ne fing else, its not to swish, but its something you could use if you wanted to. Sorry about the lack of comments and the poor coding! But it works for the use i had!


    in the head
    Code:
    <script>
    var photo = new Array();
    var totalphotos
    var thumbid = new Array();
    
    var thumb
    
    function loadphoto(pitem,pthumb,pmain,ptext)
    {
    photo[pitem] = new Array();
    photo[pitem][0] = new Image();
    photo[pitem][0].src = pthumb;
    photo[pitem][1] = new Image();
    photo[pitem][1].src = pmain;
    photo[pitem][2] = ptext;
    
    totalphotos = pitem;
    }
    
    loadphoto(0,"images/photos/cmas041t.jpg","images/photos/cmas041.jpg","Nichola and Dave together Christmas 2004")
    loadphoto(1,"images/photos/cmas042t.jpg","images/photos/cmas042.jpg","Nichola and Dave together Christmas 2004")
    loadphoto(2,"images/photos/bunbet.jpg","images/photos/bunbe.jpg","Beauty and the Beast")
    loadphoto(3,"images/photos/nic18t.jpg","images/photos/nic18.jpg","Nichola's 18th Bithday Party")
    loadphoto(4,"images/photos/nic182t.jpg","images/photos/nic182.jpg","")
    loadphoto(5,"images/photos/knmw1t.jpg","images/photos/knmw1.jpg","")
    loadphoto(6,"images/photos/knmw2t.jpg","images/photos/knmw2.jpg","")
    loadphoto(7,"images/photos/knmw3t.jpg","images/photos/knmw3.jpg","Nichola and Dave at Martin and Kari Bennit's Wedding")
    loadphoto(8,"images/photos/nnd1t.jpg","images/photos/nnd1.jpg","")
    loadphoto(9,"images/photos/nnd2t.jpg","images/photos/nnd2.jpg","")
    loadphoto(10,"images/photos/nnd3t.jpg","images/photos/nnd3.jpg","")
    
    function loadinital()
    {
    	
    for (thisthumbid = 0; thisthumbid <= 2; thisthumbid++)
    	{
    	thumbid[thisthumbid] = thisthumbid
    	
    	eval("document.images.thumb" + thisthumbid + ".src = photo[thumbid[" + thisthumbid + "]][0].src")
    	}
    	
    	changephoto(0)
    }
    
    function changephoto(pid) {
    
    	document.images.mainimg.src = photo[thumbid[pid]][1].src
    
    	var txtdes = document.getElementById("txtdes");
    	txtdes.firstChild.nodeValue=photo[thumbid[pid]][2];
    }
    
    
    function nextthumb(incr){
    
    	for (thisthumbid = 0; thisthumbid <= 2; thisthumbid++)
    		{
    
    		if ((incr + thumbid[thisthumbid]) == -1)
    			{
    			thumbid[thisthumbid] = totalphotos
    			}
    		else
    			{
    			if (thumbid[thisthumbid] == totalphotos && incr == 1)
    				{
    				thumbid[thisthumbid] = 0
    				}
    			else
    				{
    				thumbid[thisthumbid] += incr
    				}
    			}
    		
    
    		eval("document.images.thumb" + thisthumbid + ".src = photo[thumbid[" + thisthumbid + "]][0].src")
    		}	
    	
    }
    </script>
    and in the body
    Code:
    	<img src="images/photot.gif">
    	
    	<table width="625">
    	<tr>
    	<td colspan="5" align="center" valign="middle" height="520" width="625"><img name="mainimg" id="mainimg"></td>
    	</tr>
    	<tr>
    	<td colspan="5" align="center" width="625"><span name="txtdes" id="txtdes">Image Discription Here (If you can see this then sorry but your browser is not running the javascript on this page properly.)</span></td>
    	</tr>
    	<tr>
    	<td width="80" height="150" align="right" valign="middle"><a href="javascript:nextthumb(-1)"><img name="previous" id="previous" src="images/larrow.gif"></a></td>
    	<td width="155" height="150" align="center" valign="middle"><a href="javascript:changephoto(0)"><img name="thumb0" id="thumb1"></a></td>
    	<td width="155" height="150" align="center" valign="middle"><a href="javascript:changephoto(1)"><img name="thumb1" id="thumb2"></a></td>
    	<td width="155" height="150" align="center" valign="middle"><a href="javascript:changephoto(2)"><img name="thumb2" id="thumb3"></a></td>
    	<td width="80" height="150" align="leftr" valign="middle"><a href="javascript:nextthumb(1)"><img name="previous" id="previous" src="images/rarrow.gif"></a></td>
    	</tr>
    	</table>


  •  

    Posting Permissions

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