www.webdeveloper.com
Results 1 to 4 of 4

Thread: Preloading images in intervals

Hybrid View

  1. #1
    Join Date
    Nov 2004
    Posts
    39

    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>

  2. #2
    Join Date
    Mar 2011
    Posts
    1,136
    If your slideshow script works on the HTML code you show, then there's not much you can do for preloading. Once the browser sees those <img> tags in the document, it will start to fetch all of the image files from the server.
    Rick Trethewey
    Rainbo Design

  3. #3
    Join Date
    Nov 2004
    Posts
    39
    Hi Rick,

    Yeah that's just my question. Can I do it a different way than the way I have it now in the html code. Or is this a thing that has to be changen in the slideshow script?

    Japie

  4. #4
    Join Date
    Apr 2012
    Posts
    22
    This can be done only with javascript code. Check the documentation of the slideshow script. Maybe they have such option.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

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
  •  
HTML5 Development Center



Recent Articles