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
    New to the CF scene
    Join Date
    May 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    preloading a directory of images

    I'm trying to combine two scripts I found online to make a preloader for all the images in a folder. The javascript part works when you manually enter in a list of images, so I was trying to make a php array to get all the names of the images in one directory, then use that to list them. Maybe I'm going about it all wrong but it is not working. Here's what I tried:
    Code:
    <?php
    function dirList ($directory) 
    {
    
        // create an array to hold directory list
        $results = array();
    
        // create a handler for the directory
        $handler = opendir($directory);
    
        // keep going until all files in directory have been read
        while ($file = readdir($handler)) {
    
            // if $file isn't this directory or its parent, 
            // add it to the results array
            if ($file != '.' && $file != '..')
                $results[] = $file;
        }
    
        // tidy up: close the handler
        closedir($handler);
    
        // done!
        return $results;
    
    }
    ?>
    
    
    <script type="text/javascript">
    <!-- begin hiding
    
    // You may modify the following:
    	var locationAfterPreload = "page.php" // URL of the page after preload finishes
    	var lengthOfPreloadBar = 300 // Length of preload bar (in pixels)
    	var heightOfPreloadBar = 2 // Height of preload bar (in pixels)
    // Put the URLs of images that you want to preload below (as many as you want)
    Next line is where I'm messing it up i guess:
    Code:
    	var yourImages = new Array(<?php echo $results; ?>) 
    
    // Do not modify anything beyond this point!
    if (document.images) {
    	var dots = new Array() 
    	dots[0] = new Image(1,1)
    	dots[0].src = "white.gif" // default preloadbar color (note: You can substitute it with your image, but it has to be 1x1 size)
    	dots[1] = new Image(1,1)
    	dots[1].src = "black.gif" // color of bar as preloading progresses (same note as above)
    	var preImages = new Array(),coverage = Math.floor(lengthOfPreloadBar/yourImages.length),currCount = 0
    	var loaded = new Array(),i,covered,timerID
    	var leftOverWidth = lengthOfPreloadBar%coverage
    }
    function loadImages() { 
    	for (i = 0; i < yourImages.length; i++) { 
    		preImages[i] = new Image()
    		preImages[i].src = yourImages[i]
    	}
    	for (i = 0; i < preImages.length; i++) { 
    		loaded[i] = false
    	}
    	checkLoad()
    }
    function checkLoad() {
    	if (currCount == preImages.length) { 
    		location.replace(locationAfterPreload)
    		return
    	}
    	for (i = 0; i <= preImages.length; i++) {
    		if (loaded[i] == false && preImages[i].complete) {
    			loaded[i] = true
    			eval("document.img" + currCount + ".src=dots[1].src")
    			currCount++
    		}
    	}
    	timerID = setTimeout("checkLoad()",10) 
    }
    // end hiding -->
    </script>
    
    
    THEN IN THE BODY:
    
    <p>Loading images...</p>
    
    <script type="text/javascript">
    <!-- begin hiding
    
    if (document.images) {
    	var preloadBar = ''
    	for (i = 0; i < yourImages.length-1; i++) {
    		preloadBar += '<img src="' + dots[0].src + '" width="' + coverage + '" height="' + heightOfPreloadBar + '" name="img' + i + '">'
    	}
    	preloadBar += '<img src="' + dots[0].src + '" width="' + (leftOverWidth+coverage) + '" height="' + heightOfPreloadBar + '" name="img' + (yourImages.length-1) + '">'
    	document.write(preloadBar)
    	loadImages()
    }
    
    // end hiding -->
    </script>

    Any ideas of how I could make it work?

    Thanks!

  • #2
    Regular Coder ninnypants's Avatar
    Join Date
    Apr 2008
    Location
    Utah
    Posts
    504
    Thanks
    10
    Thanked 47 Times in 47 Posts
    you could just create a string for the array

    PHP Code:
    function dirList ($directory
    {

        
    // create array content for javascript


        // create a handler for the directory
        
    $handler opendir($directory);

        
    // keep going until all files in directory have been read
        
    while ($file readdir($handler)) {

            
    // if $file isn't this directory or its parent, 
            // add it to the results array
            
    if ($file != '.' && $file != '..')
                if(!isset(
    $results)){
                    
    $results '"'.$file.'"';
                }else{
                    
    $results .= ', "'.$file.'"';
        }

        
    // tidy up: close the handler
        
    closedir($handler);

        
    // done!
        
    echo $results;


    Code:
    <script type="text/javascript">
    img_array = new Array(<?dirList($directory)?>);
    </script>

  • #3
    New to the CF scene
    Join Date
    May 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry, I'm a bit thick, where would that bit of javascript then go into the preloader script?

  • #4
    New Coder
    Join Date
    Mar 2006
    Posts
    23
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Code:
    function dirList ($directory)  {
        $handler = opendir($directory);
        while ($file = readdir($handler)) {
            if ($file != '.' && $file != '..') echo "<div style='display: none'>$directory/$file</div>";
        }
        closedir($handler);
    }
    You can then toggle the images off and on with javascript.
    Last edited by Sphynx; 05-11-2009 at 08:20 PM.

  • #5
    Regular Coder ninnypants's Avatar
    Join Date
    Apr 2008
    Location
    Utah
    Posts
    504
    Thanks
    10
    Thanked 47 Times in 47 Posts
    it would be the 'preImages' array

  • #6
    New Coder
    Join Date
    Mar 2006
    Posts
    23
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Alternately, if you want to make sure they only load at images...

    Code:
    function dirList ($directory)  {
        $handler = opendir($directory);
        while ($file = readdir($handler)) 
           if (strcasecmp(substr($file, -3), "jpg") == 0)
             echo "<div style='display: none'>$directory/$file</div>";
        closedir($handler);
    }


  •  

    Posting Permissions

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