Question about preloading images

kippie · 09-08-2012, 02:11 PM

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 interveals?

Code:

<!DOCTYPE html>
<html>
<head>
	<title>de InspiratieKamers, meest inspirerende vergaderlocatie in Arnhem</title>
	
	<!-- 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>

Logic Ali · 09-08-2012, 03:48 PM

You don't want pre-loading, I think this is called 'lazy loading'.

I would use an onscroll handler that monitors the scroll speed, and when the speed falls below a certain level (or stops), determine which image placeholders are within the viewport, by comparing their offsetLeft/offsetTop values with the div's scrolled offsets and viewable area. Don't allow the calculations to be repeated until they are completed. Apply the appropriate image filename to each partially-visible placeholder.

kippie · 09-08-2012, 04:11 PM

Hi Logic Ali,
Thanks for your prompt suggestion, but I thinking this is rather difficult. SmoothDivScroll allows the user to chose the scrolling direction and the sets of images he wants to see. It is not so important which images are on screen or probably coming on screen. The whole bunch has to be loaded in portions also to be sure the loading does not disturb the scrolling........

kippie · 09-10-2012, 07:04 AM

No I want preloading. LAs far as I know, lazy loading is based on a predictable show in which you know which slides are on the screen and which are coming on the screen. But with this smoothDivScroll the visitor can choose himself which slides he wants to see. So it is unpredictable. So that's why i choose for preloading.

Old Pedant · 09-11-2012, 07:37 AM

I don't see anything wrong with your concept.

For starters only have those first 7 (or whatever number you decide on) images in that div. Luckily youe image names are all sequemtially numbered.

You should specify the image height in the css...thus:

Code:

#makeMeScrollable div.scrollableArea img
		{
			position: relative;
			float: left;
			margin: 0;
			padding: 0;
                                      height: 500px;
                                      ...

And then it's pretty simple.

Code:

<body>

	<div id="makeMeScrollable">
		<img src="image1.jpg" >
		<img src="image2.jpg" >
		<img src="image3.jpg" >
		<img src="image4.jpg" >
		<img src="image5.jpg" >
		<img src="image6.jpg" >
		<img src="image7.jpg" >
	</div>

<script type="text/javascript">
(
  function()
  {
      var holder = document.getElementById("makeMeScrollable");
      var imagecount = 7;
      var maxImageNum = 50; // or whatever

      setTimeout( moreImages, 3000 ); // you decide on how long to wait
      
      function moreImages( )
      {
          var stopAt = imageCount + 7;
          ++imageCount;
          while ( imageCount <= stopAt && imageCount <= maxImageNum )
          {
              var image = document.createElement("img");
              image.src = "image" + imageCount + ".jpg";
              holder.appendChild(image);
          }
          if ( imageCount < maxImageNum )
          {
              setTimeout( moreImages, 3000 ); // again you set the time
          }
      }
  } // end of anonymous function
)();
</script>

</body>
</html>

rnd me · 09-11-2012, 11:29 PM

i would avoid hard-coding a timeout like i see so far.
the problem with that is that you have no idea how long the images will take to load on the user's connection.

if you go to fast, the last batch won't complete before the next one begins, and the page will grind to an unusable halt as it gets more and more backed-up.

if you go to slow, the user will see blank spots, and may have to wait quite a while for the bottom images to appear.

they should be loaded as quickly as possible, one at a time, without the potential of getting backed-up or stalling the browser's interface. a 1/10th second pause between images should do the trick.

replace the src attrib on your late-load images with data-src, and use the script below. (avoid 404 image links)

Code:

function convertOne(img){
  img.onload=function(){ setTimeout(convertNext, 100); };
  img.src=img.getAttribute("data-src");
  img.removeAttribute("data-src");
}

function convertNext(){
  var next=document.querySelector("img[data-src]");
  if(next){ convertOne(next); }
}

setTimeout(convertNext, 500);