Preloading images in intervals?

Dev Shed Forums Sponsor:

September 8th, 2012, 01:06 PM

kippie

Contributing User

Join Date: Oct 2001

Posts: 297

Time spent in forums: 15 h 26 m 17 sec
Reputation Power: 12

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

September 23rd, 2012, 08:27 PM

web_loone08

Contributing User

Join Date: Aug 2008

Posts: 605

Time spent in forums: 1 Week 1 Day 16 h 30 m 44 sec
Reputation Power: 69

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>

Preloading images in intervals?

Developer Shed Advertisers and Affiliates