Random image preload problem

[babak radboy]

Hi, this is my first post on a forum ever —*but I'm in trouble! I have been working on a site the last few weeks and today is my deadline—*it was working fine locally but when I uploaded it, the page would take an obscene length of time to load!

I found the problem—*I am using a random image script for over 200 image which are all trying to preload before the page shows up.

Is there any way I can stop them from preloading, or some other way around this—*here is the script in question— I have shortened it to fit more comfortably here:

var rand1 = 0;
var useRand = 0;

images = new Array;
images[1] = new Image();
images[1].src = "images/random/1.jpg";
images[2] = new Image();
images[2].src = "images/random/2.jpg";
images[3] = new Image();
images[3].src = "images/random/3.jpg";
images[4] = new Image();
images[4].src = "images/random/4.jpg";
images[5] = new Image();
images[5].src = "images/random/5.jpg";


function swapPic() {
var imgnum = images.length - 1;
do {
var randnum = Math.random();
rand1 = Math.round((imgnum - 1) * randnum) + 1;
} while (rand1 == useRand);
useRand = rand1;
document.randimg.src = images[useRand].src;
}
//  End -->

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

[jscheuer1]

I would be inclined to have a loading image, like:



And forget about preloading everything, that obviously takes too long. So something like:

var rand1 = 0;
var useRand = 0;

images = [];
images[1] =  "images/random/1.jpg";
images[2] =  "images/random/2.jpg";
images[3] =  "images/random/3.jpg";
images[4] =  "images/random/4.jpg";
images[5] =  "images/random/5.jpg";


function swapPic() {
	var imgnum = images.length - 1;
	do {
		var randnum = Math.random();
		rand1 = Math.round((imgnum - 1) * randnum) + 1;
	} while (rand1 == useRand);
	useRand = rand1;
	document.images.randimg.src = 'loading.gif';
	var im = new Image();
	im.onload = function(){
		document.images.randimg.src = this.src;
	}
	im.src = images[useRand];
}

If document.images.randimg is in a table cell and is the only thing in that table cell and that cell has a fixed width and height, the loading image when it appears will be centered.

If you want more help:

Please post a link to a page on your site that contains the problematic code so we can check it out.

[babak radboy]

jscheuer1 —*thanks so much for the reply. I'm stressing out!

Ok—*I am actually not trying to preload anything —*I will try the code that you posted—*I take it it does not preload, correct?

I will try it now—*thanks again.

Xb

[jscheuer1]

Right, no preloading. That's what the loading image is for. Each image loads as it's called for. If that takes more than a few milliseconds, you see the loading image until the actual image loads. Once the actual image is cached, you will no longer see the loading image for that particular image.

If you have this set up as an automatic rotating slideshow though we would need more code to make it work right.

But as long as you're using a link or button for the user to manually move to the next image, this should be OK.

[babak radboy]

Jscheur1 - I swapped in your code and it doesn't seem to be working now... You can view my shambolic work in progress at: www.babakradboy.com/index_test.html

[babak radboy]

I'm using links—*they look like this: <a onClick="swapPic();">

[babak radboy]

Any idea why your modification it isn't working? Really appreciate the time.

Best,
xb

[jscheuer1]

Ooops, my bad. I made a typo:

<!-- Begin
var rand1 = 0;
var useRand = 0;

images = [];
images[1] =  "images/random/1.jpg";
images[2] =  "images/random/2.jpg";
images[3] =  "images/random/3.jpg";
images[4] =  "images/random/4.jpg";
images[5] =  "images/random/5.jpg";


function swapPic() {
	var imgnum = images.length - 1;
	do {
		var randnum = Math.random();
		rand1 = Math.round((imgnum - 1) * randnum) + 1;
	} while (rand1 == useRand);
	useRand = rand1;
	document.images.randimg.src = 'loading.gif';
	var im = new Image();
	im.onload = function(){
		document.images.randimg.src = this.src;
	}
	im.src = images[useRand];
}
//  End -->

Add the red single quotes as shown above on the highlighted line.

[babak radboy]

wow. that works- thanks so much! and it doesn't preload? you have totally saved my life!

It would be wonderful to know how to do this without having to identify each file—*like in PHP version I've seen, but in a div and onClick...

Anyway—
thanks again,
Babak

[jscheuer1]

No preloading. You have PHP? If so you could use it to fetch the array of images from a folder. If not, and you know how many images, and they're all numbered 1 to whatever like in your demo and there are none missing in the sequence, you could do:

var rand1 = 0;
var useRand = 0;

function swapPic() {
	var imgnum = 226; // number of images
	var fallback = 'images/random/c.jpg'; // default image if there's a problem loading the random image
	do {
		var randnum = Math.random();
		rand1 = Math.ceil(imgnum * randnum);
	} while (rand1 == useRand);
	useRand = rand1;
	document.images.randimg.src = 'loading.gif';
	var im = new Image();
	im.onload = function(){
		document.images.randimg.src = this.src;
	};
	im.onerror = function(){
		if(confirm('Image #' + useRand + ' missing. Try another?')){
			swapPic();
		} else {
			document.images.randimg.src = fallback;
		}
	};
	im.src = 'images/random/' + useRand + '.jpg';
}