Randomizing images without preloading and repeats

[utahwrx]

I currently have a Javascript application that randomizes about 200
images. The problem is that the images preload, which causes the entire
site to not come up until all the images are loaded. I'd like to find a
Javascript application that can load images as they are randomly
chosen. In addition, I'm trying to figure out how to not display the
same image more than once; or at least until after the 200 have been
displayed, then create a new randomization of the 200 images.

Let me know if anyone knows how to do this or can point me to code that
is able to do what I'm looking for.

Thanks for your time!

 

[RobG]

I currently have a Javascript application that randomizes about 200
images. The problem is that the images preload, which causes the entire
site to not come up until all the images are loaded. I'd like to find a
Javascript application that can load images as they are randomly
chosen. In addition, I'm trying to figure out how to not display the
same image more than once; or at least until after the 200 have been
displayed, then create a new randomization of the 200 images.

Let me know if anyone knows how to do this or can point me to code that
is able to do what I'm looking for.

Thanks for your time!

1. Provide the image source values in an array
2. Copy the array to use for the randomisation process
3. When required, randomly select one image source from the copy and
remove it from the array.
4. When there are no elements left in the copied array, copy the
original array back into it and start again.

e.g.

<script type="text/javascript">

var imageSrc = ['image1.jpg','image2.jpg','image3.jpg',
'image4.jpg','image5.jpg','image6.jpg'];
var imageSrc2 = [];;

function copyRandom(){
if (0 == imageSrc2.length) {
imageSrc2 = imageSrc.concat();
}
var randNum = (Math.random()*imageSrc2.length) | 0;
return imageSrc2.splice(randNum, 1);
}
</script>

<button
onclick="document.getElementById('xx').innerHTML = (copyRandom());">
Show random src
</button>
<div id="xx"></div>

You could even pre-select the next image and pre-load it so that you
only pre-load them one at a time. Provided there is a suitable pause
between the display of each image, the display of the next image will
be instantaneous.

You may get the same image displayed twice in a row if it is selected
as the last in one set and the first in the next set, but if you have
200 images in the array, the chance of that happening is pretty small.
If it is a problem, remember the last image used and if new image name
is the same, get another random number. That could be further
optimised by only checking when you've re-loaded the imageSrc2 array,
but I don't think it's necessary.

 

[Dr John Stockton]

JRS: In article <[email protected]>,
dated Sun, 24 Sep 2006 20:04:01 remote, seen in

1. Provide the image source values in an array
2. Copy the array to use for the randomisation process
3. When required, randomly select one image source from the copy and
remove it from the array.
4. When there are no elements left in the copied array, copy the
original array back into it and start again.

Or:

1. Ditto
2. Determine the size of the array (0..N-1).
3. Deal 0..N-1 in random order into a new array (see FAQ 4.22 links)
4. Use that array, re-dealing as often as needed, to index the images
array.

Note : with re-randomisation, some images will occur late in one cycle
and early in the next. To avoid that, either

A) Don't re-deal,
or
B) Make an empty second array. Deal as before from the first, move the
current picture to the end of the second array and (after the first 100
goes) move the first picture of the second array to the first array.
ISTM that a picture once shown will not be eligible again for 100 goes.

To be sure of avoiding pre-loading, do the above work with the numbers
of the images (say 1000 to 1999) and compose each name only when first
used.