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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    5
    Thanks
    0
    Thanked 1 Time in 1 Post

    Need image loading/PreLoading code Please!

    Hi!
    i am working on a facebook like photo viewer. I have used javascript to declare an array of about 200 images. I have the following approach to pre-load the images.

    I preload all the images when the page loads:

    HTML: <body onload = "lodpic()">

    JAVASCRIPT:

    function lodpic()
    {
    for(i=0; i<=199; i++) {
    LODImage = new Image();
    LODImage.src = picture[i];
    }
    }

    The problem is the page tries to load all the images when opened. And when the user clicks "next" to view other photos, the other photo is still loading where as some are already loaded.

    I would like the code to be able to load the photo that the user is currently viewing as the user gets to that picture, before the page tries to finish loading all the photos.

    In other words, if the user wants to view a particular photo directly, that photo should get the priority of loading quickly.

    Or if there are other approaches, it would be really helpful.

    Thank you!

  • #2
    Regular Coder
    Join Date
    Nov 2009
    Posts
    247
    Thanks
    4
    Thanked 22 Times in 22 Posts
    I don't believe it's practical to use "next" and "previous" buttons/links with 200+ images.

    Since you already use an image array, try this instead:

    Dynamically Created Photo Gallery with Animated Image Fade-in, Click for Full-size
    Also save the attached images.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Dynamically Created Photo Gallery with Animated Image Fade-in, Click for Full-size</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript">	
    
    /*   Dynamically Created Photo Gallery with Animated Image Fade-in, Click for Full-size */
    /*   Copyright 2009, Michael J. Hill.  All rights reserved. Used with permission.  www.javascript-demos.com */
    /*   Free use of the code, so long as the above notice is kept intact */
    
    	var imgPath = "./images/";
    
    	var dynamicImage = [];             // file | width | height;    
    	dynamicImage[dynamicImage.length] = "CBa.jpg | 185 | 225";
    	dynamicImage[dynamicImage.length] = "CB1.jpg | 160 | 170";
    	dynamicImage[dynamicImage.length] = "CB2.jpg | 215 | 300";
    	dynamicImage[dynamicImage.length] = "CBd.jpg | 140 | 250";
    	dynamicImage[dynamicImage.length] = "CB4.jpg | 125 | 185";
    	dynamicImage[dynamicImage.length] = "CB3.jpg | 185 | 200";
    	dynamicImage[dynamicImage.length] = "CBb.jpg | 160 | 175";
    
    /*   Do not edit below this line */
    
    	var loadingImageSrc = imgPath + "loading.gif";
    	loadingImage = document.createElement('img');
    	loadingImage.src = loadingImageSrc; 	
    	var grandLoadingGIF = document.createElement('img');
    	grandLoadingGIF.src = imgPath + "grand_loading.gif";	
    	var sWidth = screen.width;
    	var sHeight = screen.height;
    	var fullSizePct = "";
    	var IE = navigator.appName == "Microsoft Internet Explorer" ? true : false;
    
    	function displayFull(){
    
    		var nV = document.documentElement.scrollTop;
    		var origWidth = popImg.width;
    		popImg.width = Math.round(origWidth * fullSizePct);	
    		popDiv.style.left = Math.round((sWidth - popImg.width)/2) + "px";	
    		popDiv.style.top = Math.round(((sHeight - popImg.height)/4) - (30 * fullSizePct)) + nV + "px";							
    	}
    
    	function openFullSize(nSrc){
    		
    		while (popDiv.lastChild)
    			{
    		 	 popDiv.removeChild(popDiv.lastChild);
    			 popDiv.style.top = "-10000px";
    			}
    		popImg = document.createElement("img");
    		!IE ? popImg.style.marginBottom = "-4px" : null;	
    		popImg.alt = "Click to close";
    		popImg.title = "Click to close";		
    		popDiv.appendChild(popImg);
    		nBody.appendChild(popDiv);	
    		popImg.src = nSrc;
    		nShadow.style.width = document.documentElement.clientWidth + "px";
    		nShadow.style.height =  document.documentElement.scrollHeight >= document.documentElement.clientHeight ? document.documentElement.scrollHeight + "px"
    											  				: document.documentElement.clientHeight + "px";
    		nShadow.style.display = "";
    		grandLoadingGIF.style.top = (document.documentElement.clientHeight / 2) - 16
    					  + document.documentElement.scrollTop + "px";					
    		grandLoadingGIF.style.left = (document.documentElement.clientWidth / 2) - 16 + "px";
    		grandLoadingGIF.style.display = "";	
    		setTimeout("displayFull()", 900);	
    		popDiv.onclick = function()
    			{			
    			 nShadow.style.display = "none"; 
    			 grandLoadingGIF.style.display = "none";
    			 this.style.top = "-10000px";	
    			 while (popDiv.lastChild)
    				{
    			 	 popDiv.removeChild(popDiv.lastChild)
    				}	
    			}
    	}
    
    	function brushIn(nStaticImg){
    
    		var nOpacity = 0;			
    		var nInterval = setInterval(function()
    			{
    		 	 nOpacity < 100 ? nOpacity = nOpacity + 2 : clearInterval(nInterval);
    		 	 IE ? nStaticImg.style.filter = "alpha(opacity = "+nOpacity+")"
    		 	 : nStaticImg.style.opacity = (nOpacity / 100); 
    			}, 25);	
    		IE ? nStaticImg.detachEvent('onload', brushIn, false) : nStaticImg.removeEventListener('load', brushIn, false);	 
    	}
    
    	function init(){		
    			
    		var nLoadImg = "";		
    		var nWrapper = "";
    		var imageArchive = [];	
    		var nStaticImg = [];
    		var nDiv = document.getElementsByTagName('div');
    		for (i=0; i<nDiv.length; i++)
    			{
    			 if (nDiv[i].className == "imgContainer")
    				{
    				 var nContainer = nDiv[i];				 
    				}
    			}
    		fullSizePct = (nContainer.title.replace(/%/, "") / 100).toFixed(2);
    		nContainer.title = "Click Image to Enlarge";
    		var dynImgInfo = "";
    		for (i=0; i<dynamicImage.length; i++)
    			{
    			 dynImgInfo = dynamicImage[i].split("|");
    			 imageArchive[imageArchive.length] = [dynImgInfo[0], dynImgInfo[1], dynImgInfo[2]];
    			 nStaticImg[nStaticImg.length] = document.createElement('img');		 
    			}
    		nContainer.style.visibility = "visible";
    		for (i=0; i<dynamicImage.length; i++)
    			{			 
    			 nLoadImg = document.createElement('img');
    			 nLoadImg.style.position = "absolute";
    			 nLoadImg.style.backgroundColor = "#90ee90";
    			 nLoadImg.alt = "";
    			 nLoadImg.src = loadingImage.src;								
    		 	 nStaticImg[i].onload = function()
    				{				
    			 	 brushIn(this);
    				}			
    			 nStaticImg[i].src = imgPath + imageArchive[i][0];
    			 IE ? nStaticImg[i].style.filter = "alpha(opacity = 0)" : nStaticImg[i].style.opacity = 0;			 	
    			 imageArchive[i][2] >= nContainer.clientHeight - 15
    				 ? imageArchive[i][2] = nContainer.clientHeight - 15
    				 : imageArchive[i][2];
    			 nStaticImg[i].height = imageArchive[i][2];
    			 nStaticImg[i].width = imageArchive[i][1];	
    			 nStaticImg[i].style.position = "relative";
    			 nStaticImg[i].style.cursor = "pointer";	
    			 nStaticImg[i].style.marginBottom = nContainer.clientHeight - imageArchive[i][2] - 12 + "px";	
    			 nStaticImg[i].onclick = function()
    				{
    				 openFullSize(this.src);
    				}	
    			 nLoadImg.style.top = (imageArchive[i][2] / 2) - 12 + "px";
    			 nLoadImg.style.left = (imageArchive[i][1] / 2) - 12 + "px";
    			 nWrapper = document.createElement('div');			 
    			 IE ? nWrapper.style.styleFloat = "left" : nWrapper.style.cssFloat = "left";			
    			 nWrapper.style.position = "relative";	
    			 nWrapper.style.paddingRight = "5px";	
    			 nWrapper.appendChild(nLoadImg);
    			 nWrapper.appendChild(nStaticImg[i]);			
    			 nContainer.appendChild(nWrapper);		
    			 nBody = document.getElementsByTagName("body")[0];	
    			 popDiv = document.createElement('div');
    			 popDiv.style.position = "absolute";
    			 popDiv.style.top = "-10000px";
    			 popDiv.style.cursor = "pointer";
    			 popDiv.style.border = "1px solid black";		 
    			 nShadow = document.createElement('div');		
    		 	 nShadow.style.backgroundColor =  "#808080"; 
    			 nShadow.style.position = "absolute";
    			 nShadow.style.top = "0px";
    			 nShadow.style.left = "0px";
    			 nShadow.style.display = "none";
    			 IE ? nShadow.style.filter = "alpha(opacity = 75)" : nShadow.style.opacity = .75;	
    			 nBody.appendChild(nShadow);	
    			 nBody.appendChild(grandLoadingGIF);
    			 grandLoadingGIF.style.display = "none"; 
    			 grandLoadingGIF.style.position = "absolute";			
    			 grandLoadingGIF.style.backgroundColor = "#90ee90";						
    			} 		
    	}
    
    	IE ? attachEvent('onload', init, false) : addEventListener('load', init, false);	
    
    </script>
    <style type="text/css">
    
    	 body	{margin-top: 200px;}
    	.imgContainer {position: relative; visibility: hidden;  border: 1px solid black;
    		       width: 800px; height: 225px; background-color: #f0fff0; margin-left: auto;
    		       margin-right: auto; padding-left: 3px; overflow: auto; padding-bottom: 5px;}	
    	.imgContainer img {margin-top: 3px; margin-bottom: 3px; border: 1px solid blue;}
    	
    </style>
    </head>
    <body>
    	<!-- title = the size at which the "full size" images will be displayed. -->
    	<div class="imgContainer" title="90%"></div>
    	
    </body>
    </html>
    Attached Images Attached Images   
    Last edited by Sciliano; 12-29-2010 at 08:44 PM.

  • #3
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    5
    Thanks
    0
    Thanked 1 Time in 1 Post
    Thank You for your reply.

    But is there anyway to give the "loading priority" to the user clicked image first while other images are still loading? I mean I want the user to be able to click 81th image out of 200, while all the images are loading, but the 81th image must get the "loading priority" (load 81th first before the "still loading" images, if the 81th image is not loaded already) for fast loading. But I still want other images to load in the background for faster experience.

    =/

  • #4
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    5
    Thanks
    0
    Thanked 1 Time in 1 Post
    Anyone? Or am I trying something that's not possible? :S

  • #5
    Regular Coder
    Join Date
    Jan 2006
    Posts
    568
    Thanks
    6
    Thanked 84 Times in 84 Posts
    You could move the onload to the tag of the current image:

    Code:
    <img src="current_image" onload="lodpic()">
    Or you could only preload the two images either side of the current image in the sequence, so going from 5 to 6 is quick but 5 to 34 not.


  •  

    Posting Permissions

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