#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2001
    Posts
    297
    Rep Power
    13

    Preloading images in intervals?


    Question about preloading images

    --------------------------------------------------------------------------------

    I'm working on a website with a slideshow (smoothDivScroll) and a lot of big images (about 50 photos of 50k each). This is all together more than 2500k so I want to use preloading of the images. Now I don't need to show all images right from the beginning, so I want to preload in steps: first the first 7 images which are necessary for the first look, than the next 7 when the page had loaded, then the next 7 after lets say 5 seconds etc. The images all have the same heigth of 500 px but different widths.

    Basically (without the scrolling scripts) the html is as shown under. Can anybody help me with a script to load these images in intervals?

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    	
    	<!-- the CSS for Smooth Div Scroll -->
    	<link rel="Stylesheet" type="text/css" href="http://www.deinspiratiekamers.nl/smoothdivnew/css/smoothDivScroll.css"/>
    	
    	<style type="text/css">
    
    		body {
    		text-align: center;
    		min-width: 1200px;
    		margin-left: -0px;
    		margin-right: -0px;
    		margin-top: -0px;
    		}
    
    #makeMeScrollable
    		{
    			width:100%;
    			height: 500px;
    			position: relative;
    		}
    		
    #makeMeScrollable div.scrollableArea img
    		{
    			position: relative;
    			float: left;
    			margin: 0;
    			padding: 0;
    			/* If you don't want the images in the scroller to be selectable, try the following
    			   block of code. It's just a nice feature that prevent the images from
    			   accidentally becoming selected/inverted when the user interacts with the scroller. */
    			-webkit-user-select: none;
    			-khtml-user-select: none;
    			-moz-user-select: none;
    			-o-user-select: none;
    			user-select: none;
    		}
    	</style>
    
    </head>
    
    <body>
    
    	<div id="makeMeScrollable">
    		<img src="image1.jpg" height="500px" id="kamer0-1">
    		<img src="image2.jpg" height="500px" id="kamer0-2">
    		<img src="image3.jpg" height="500px" id="kamer1-1">
    		<img src="image4.jpg" height="500px" id="kamer1-1">
    		<img src="image5.jpg" height="500px" id="kamer3-1">
    		<img src="image6.jpg" height="500px" id="kamer3-1">
    		<img src="image7.jpg" height="500px" id="kamer4-1">
    		<img src="image8.jpg" height="500px" id="kamer4-2">
    		......
    		<img src="image50.jpg" height="500px" id="kamer7-7">
    	</div>
    
    </body>
    
    </html>
    Last edited by kippie; September 8th, 2012 at 01:08 PM. Reason: errors in text
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,158
    Rep Power
    183
    You could possibly do something like this; although you may have to dynamically assign the variables with a unique number, each time... instead of the static photo - photo7 variables; the browser may destroy the image creation from memory otherwise (when function loops). I am not sure about that though; that is just my speculation.

    Code:
    <script>
    
    var timer;
    
    var gallery = new Array();
    
    var imgCount = gallery.length  - 1;
    
    var count = 0;
    
    function preloadInterval()
    {
    count++;
    var photo = new Image();
    photo.src = gallery[count];
    var photo2 = new Image();
    photo.src = gallery[count+1];
    var photo3 = new Image();
    photo.src = gallery[count+2];
    var photo4 = new Image();
    photo.src = gallery[count+4];
    var photo5 = new Image();
    photo.src = gallery[count+5];
    var photo6 = new Image();
    photo.src = gallery[count+6];
    var photo7 = new Image();
    photo.src = gallery[count+7];
    }
    
    function setTimer()
    {
    timer = window.setInterval("preloadInterval()",5000)
     if (count == imgCount) {
      window.clearInterval(timer);
     }
    }
    
    window.onload = function() {
    new setTimer();
    }
    
    </script>

IMN logo majestic logo threadwatch logo seochat tools logo