Preloading images in intervals
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>
