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 6 of 6
  1. #1
    Regular Coder
    Join Date
    Jul 2002
    Posts
    197
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

  • #2
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    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.

  • #3
    Regular Coder
    Join Date
    Jul 2002
    Posts
    197
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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........

  • #4
    Regular Coder
    Join Date
    Jul 2002
    Posts
    197
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,618
    Thanks
    78
    Thanked 4,388 Times in 4,353 Posts
    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>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #6
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,350
    Thanks
    11
    Thanked 589 Times in 570 Posts
    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);
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%


  •  

    Tags for this Thread

    Posting Permissions

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