Modify Preload Image Script to Load Folders

**nelsontimken** · 06-16-2006, 07:11 PM

http://www.dynamicdrive.com/dynamici...eloadimage.htm

I would like to modify this script to load entire folders of images, then bring the user to the home page of the site.

I have a PHP script which I would like to integrate with this script to do this, but it is generating errors and not working properly to integrate the images into the array.

The script is:

<?
Header("content-type: application/x-javascript");
$pathstring=pathinfo($_SERVER['PHP_SELF']);
$locationstring="http://" . $_SERVER['HTTP_HOST'].$pathstring['dirname'] . "/";

function returnimages($dirname=".") {
$pattern="(\.jpg$)|(\.png$)|(\.jpeg$)|(\.gif$)";
$files = array();
$curimage=0;
if($handle = opendir($dirname)) {
while(false !== ($file = readdir($handle))){
if(eregi($pattern, $file)){
echo 'yourImages[' . $curimage .']="' . $file . '";';
$curimage++;
}
}

closedir($handle);
}
return($files);
}

echo 'var locationstring="' . $locationstring . '";';
echo 'var yourImages=new Array();';
returnimages()
?>

It generates a list of files in the folder you place it in. I would like to run multiple iterances of it to load several folders.

I could use some help on this, or any other method of modifying this script to load an entire directory.

Thanks.

Nelson

**jscheuer1** · 06-16-2006, 10:08 PM

I think your concept is a bit flawed. It takes just as long to preload an image as it does to load it. Preloading the images for an entire site is a waste of the user's time, especially a dial up user. Better just to preload small images required for a page's rollovers or special effects at or near the time (ideally just before) when that page loads. The larger display images on a page should be allowed to download in the normal fashion. This won't take so long per page and is best speeded up by reducing the number, size and the file sizes (optimization) of your images, not by preloading them.

**jscheuer1** · 06-17-2006, 03:46 AM

I'd take a close look at this script:

http://www.dynamicdrive.com/dynamici...photoalbum.htm

It has a getpics.php that fills out an array for the javascript portion of the script. Read the entire demo page for info on how to use it.

On my original tack though (about not relying upon preloading too much) I should have added that for rollovers, it is better to use one image and just change the text, or no images and just change the background color, border style, etc. to simulate rollovers image changes. These are much more nimble and require little or no preloading.

**nelsontimken** · 06-17-2006, 11:30 PM

I tried to integrate the PHP file you suggested, with no luck.

Here is my code in the HTML file:

Please, someone, where did I go wrong?

Thanks.

Nelson

<html>
<head>
<script src="http://www./protestantlawyersny.org/Graphics/Installation_2006/Thumbnails/getpicsdir.php" type="text/javascript"></script>

<title>Preload Image Page</title>
<title>Preload Image Page</title>

<script language="JavaScript1.1">

</script>

</head>

<body bgcolor="#FFFFFF">

<center>
<font size="4">Please be patient while some images<br>
are being preloaded...</font><p>
0%
<script language="JavaScript1.1">

</script>
</center>

</body>
</html>

The getpicsdir.php file reads:
<?
Header("content-type: application/x-javascript");

function returnimages($dirname=".") {
$pattern="\.(jpg|jpeg|png|gif|bmp)$";
$files = array();
$curimage=0;
if($handle = opendir($dirname)) {
while(false !== ($file = readdir($handle))){
if(eregi($pattern, $file)){
$filedate=date ("M d, Y H:i:s", filemtime($file));
echo 'yourImages[' . $curimage .']=["' . $file . '", "'.$filedate.'"];' . "\n";
$curimage++;
}
}

closedir($handle);
}
return($files);
}

echo "var yourImages=new Array();" . "\n";
returnimages();
?>

**jscheuer1** · 06-18-2006, 02:29 AM

To begin with, this is invalid:

Code:

http://www./protestantlawyersny.org/Graphics/Installation_2006/Thumbnails/getpicsdir.php

This local page faithfully returned a listing of the directory in question:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>
<body>
<script src="http://www.protestantlawyersny.org/Graphics/Installation_2006/Thumbnails/getpicsdir.php" type="text/javascript"></script>

<script type="text/javascript">
var imagepath="http://www.protestantlawyersny.org/Graphics/Installation_2006/Thumbnails/" //Absolute path to image directory. Include trailing slash (/)
for (var i_tem = 0; i_tem < yourImages.length; i_tem++)
document.write(imagepath+yourImages[i_tem][0]+'<br>')
</script>

</body>
</html>

All that is required for any script using an array of images, be it a preload script, gallery script, or whatever, is that you feed it this array where it requires/uses an array of images.

If you still need help:

To avoid confusion, give me a link to the demo, here on Dynamic Drive, of the preload script that you want to use this with.

**nelsontimken** · 06-20-2006, 12:14 AM

Originally Posted by jscheuer1

To begin with, this is invalid:

Code:

http://www./protestantlawyersny.org/Graphics/Installation_2006/Thumbnails/getpicsdir.php

This local page faithfully returned a listing of the directory in question:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>
<body>
<script src="http://www.protestantlawyersny.org/Graphics/Installation_2006/Thumbnails/getpicsdir.php" type="text/javascript"></script>

<script type="text/javascript">
var imagepath="http://www.protestantlawyersny.org/Graphics/Installation_2006/Thumbnails/" //Absolute path to image directory. Include trailing slash (/)
for (var i_tem = 0; i_tem < yourImages.length; i_tem++)
document.write(imagepath+yourImages[i_tem][0]+'<br>')
</script>

</body>
</html>

All that is required for any script using an array of images, be it a preload script, gallery script, or whatever, is that you feed it this array where it requires/uses an array of images.

If you still need help:

To avoid confusion, give me a link to the demo, here on Dynamic Drive, of the preload script that you want to use this with.

John:

I corrected the URL.
The demo page itself is located at:

http://www.protestantlawyersny.org/p...image_page.htm

the script from DD is:
http://www.dynamicdrive.com/dynamici...eloadimage.htm

the PHP script to get the names in the directory is:
<?
Header("content-type: application/x-javascript");

function returnimages($dirname=".") {
$pattern="\.(jpg|jpeg|png|gif|bmp)$";
$files = array();
$curimage=0;
if($handle = opendir($dirname)) {
while(false !== ($file = readdir($handle))){
if(eregi($pattern, $file)){
$filedate=date ("M d, Y H:i:s", filemtime($file));
echo 'yourImages[' . $curimage .']=["' . $file . '", "'.$filedate.'"];' . "\n";
$curimage++;
}
}

closedir($handle);
}
return($files);
}

echo "var yourImages=new Array();" . "\n";
returnimages();
?>
and I also have this one:

<?
$dir = 'Graphics';

// open specified directory
$dirHandle = opendir($dir);
$count = -1;
$yourImages = "";
while ($file = readdir($dirHandle)) {
// if not a subdirectory and if filename contains the string '.jpg'
if(!is_dir($file) && strpos($file, '.jpg')>0) {
// update count and string of files to be returned
$count++;
$yourImages .= '&f'.$count.'='.$file;
}
}
$returnstr .= '&';
echo $yourImages;
closedir($dirHandle);
?>

I imagine either would work with someone who knew what they were doing (not me, obviously).

What I want to do is to modify the DD script to load in all the thumbnails that I use on the top of each page so they move faster.

Right now, the demo page switches fast to the DD page and appears to load nothing.

Thanks for helping.

Nelson

**jscheuer1** · 06-20-2006, 03:17 AM

Code:

<html>
<head>
<title>Preload Image Page</title>
<script src="http://www.protestantlawyersny.org/Graphics/Installation_2006/Thumbnails/getpicsdir.php" type="text/javascript"></script>
<script language="JavaScript1.1">
<!-- begin hiding

/*
Preload Image With Update Bar Script (By Marcin Wojtowicz [one_spook@hotmail.com])
Submitted to and permission granted to Dynamicdrive.com to feature script in it's archive
For full source code to this script and 100's more, visit http://dynamicdrive.com
*/

// You may modify the following:
	var locationAfterPreload = "http://dynamicdrive.com" // URL of the page after preload finishes
	var lengthOfPreloadBar = 150 // Length of preload bar (in pixels)
	var heightOfPreloadBar = 15 // Height of preload bar (in pixels)



// Do not modify anything beyond this point!
if (document.images) {
	var dots = new Array() 
	dots[0] = new Image(1,1)
	dots[0].src = "black.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 = "blue.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 = 'http://www.protestantlawyersny.org/Graphics/Installation_2006/Thumbnails/'+yourImages[i][0]
	}
	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>

</head>

<body bgcolor="#FFFFFF">

<center>
<font size="4">Please be patient while some images<br>
are being preloaded...</font><p>
0%
<script language="JavaScript1.1">
<!-- begin hiding
// It is recommended that you put a link to the target URL just in case if the visitor wants to skip preloading
// for some reason, or his browser doesn't support JavaScript image object.
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 + '" align="absmiddle">'
	}
	preloadBar += '<img src="' + dots[0].src + '" width="' + (leftOverWidth+coverage) + '" height="' + heightOfPreloadBar + '" name="img' + (yourImages.length-1) + '" align="absmiddle">'
	document.write(preloadBar)
	loadImages()
}
document.write('<p><small><a href="javascript:window.location=locationAfterPreload">Skip Preloading</a> *| *<a href="http://dynamicdrive.com/">Script Credits</a></small></p>')
// end hiding -->
</script>
</center>

</body>
</html>

**nelsontimken** · 06-20-2006, 11:44 AM

John:

Many thanks!

Just so I can learn from my stupidity, I see you removed

var yourImages = newArray()

and added a location for the images in

preImages[i].src 'http://www.protestantlawyersny.org/Graphics/Installation_2006/Thumbnails/'+yourImages[i][0]

when I made those changes, the page worked nicely.

Can I ask, for my own knowledge, why those changes were necessary? I thought the PHP script loaded the location of the images and stored it automatically when placed in the same folder as the images.

Thanks again!

Nelson

**jscheuer1** · 06-20-2006, 09:23 PM

I had to get rid of:

Code:

var yourImages = newArray()

because, by declaring that after getpics had already populated the yourImages array, you were setting it to an empty array again, before it was used by the rest of the code.

As for the paths - I just went for the easiest, most transferable method. The page I created will work from anywhere on the web, including a local computer with a live internet connection.

It is possible to edit getpics to make it pass the path to the files instead of just their names or, if the preload page is in the right location, you can use a relative path (without editing getpics) in the line:

Code:

preImages[i].src 'http://www.protestantlawyersny.org/Graphics/Installation_2006/Thumbnails/'+yourImages[i][0]

Also, getpics could be edited to produce a simple (mono-dimensional) array with no date entries, then you wouldn't need:

Code:

yourImages[i][0]

You could use just:

Code:

yourImages[i]

**nelsontimken** · 06-20-2006, 10:08 PM

Thanks John... I LOVE the way the preloading page from DD works now on my site:
http://www.protestantlawyersny.org

One final question on this.

The getpics.php file returns the directory location of where it is stored, and assuming I place it in ANOTHER directory, rename it to GETPICS2 or something, rename the variable it returns to yourImages2, and want to preload the images in yet ANOTHER directory, would I simply use a second iterance of the function to preload the second directory of images, or is there another more efficient way to modify the function code to preload two arrays generated by the two separate php files, or an alternate way to just load both directories into arrays and preload them?

Nelson

Thread: Modify Preload Image Script to Load Folders

Thread Tools

Search Thread

Modify Preload Image Script to Load Folders

Bookmarks

Bookmarks

Posting Permissions