D Benway
Reputation: 77
A script that loads an image at random from an array without repeating any until all have been viewed
I am running a script that loads an image from an array at random each time the page is refreshed. An undesirable feature of this script, and every other script like it that I have seen online, is that though there are over 100 images in the array, it often loads the same image a number of times before all of the images in the array have been viewed.
I would like to alter the script to prevent the same image from being called twice before all of the images in the array have been viewed. If an entirely different approach than the one I have taken here is preferable, please let me know. Also, my understanding of javascript is shakey so a thorough explanation of how to correct this issue would be most helpful.
Thanks in advance
Here is the page source:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<link href="css/styles.css" rel="stylesheet" type="text/css">
<!--[if IE]><link href="css/ie-styles.css" rel="stylesheet" type="text/css"><![endif]-->
<script type="text/javascript">
<!--
var xoxo = new Array(); // Array to hold filenames
xoxo[0] = "images/portrait/fpo/01.jpg"
xoxo[1] = "images/portrait/fpo/02.jpg"
xoxo[2] = "images/portrait/fpo/03.jpg"
xoxo[3] = "images/portrait/fpo/04.jpg"
xoxo[4] = "images/portrait/fpo/05.jpg"
xoxo[5] = "images/portrait/fpo/06.jpg"
xoxo[6] = "images/portrait/fpo/07.jpg"
xoxo[7] = "images/portrait/fpo/08.jpg"
xoxo[8] = "images/portrait/fpo/09.jpg"
xoxo[9] = "images/portrait/fpo/10.jpg"
xoxo[10] = "images/portrait/fpo/11.jpg"
xoxo[11] = "images/portrait/fpo/12.jpg"
xoxo[12] = "images/portrait/fpo/13.jpg"
xoxo[13] = "images/portrait/fpo/14.jpg"
xoxo[14] = "images/portrait/fpo/15.jpg"
xoxo[15] = "images/portrait/fpo/16.jpg"
xoxo[16] = "images/portrait/fpo/17.jpg"
xoxo[17] = "images/portrait/fpo/18.jpg"
xoxo[18] = "images/portrait/fpo/19.jpg"
xoxo[19] = "images/portrait/fpo/20.jpg"
xoxo[20] = "images/portrait/fpo/21.jpg"
xoxo[21] = "images/portrait/fpo/22.jpg"
xoxo[22] = "images/portrait/fpo/23.jpg"
xoxo[23] = "images/portrait/fpo/24.jpg"
xoxo[24] = "images/portrait/fpo/25.jpg"
xoxo[25] = "images/portrait/fpo/26.jpg"
xoxo[26] = "images/portrait/fpo/27.jpg"
xoxo[27] = "images/portrait/fpo/28.jpg"
xoxo[28] = "images/portrait/fpo/29.jpg"
xoxo[29] = "images/portrait/fpo/30.jpg"
xoxo[30] = "images/portrait/fpo/31.jpg"
xoxo[31] = "images/portrait/fpo/32.jpg"
xoxo[32] = "images/portrait/fpo/33.jpg"
xoxo[33] = "images/portrait/fpo/34.jpg"
xoxo[34] = "images/portrait/fpo/35.jpg"
xoxo[35] = "images/portrait/fpo/36.jpg"
xoxo[36] = "images/portrait/fpo/37.jpg"
xoxo[37] = "images/portrait/fpo/38.jpg"
xoxo[38] = "images/portrait/fpo/39.jpg"
xoxo[39] = "images/portrait/fpo/40.jpg"
xoxo[40] = "images/portrait/fpo/41.jpg"
xoxo[41] = "images/portrait/fpo/42.jpg"
xoxo[42] = "images/portrait/fpo/43.jpg"
xoxo[43] = "images/portrait/fpo/44.jpg"
xoxo[44] = "images/portrait/fpo/45.jpg"
xoxo[45] = "images/portrait/fpo/46.jpg"
xoxo[46] = "images/portrait/fpo/47.jpg"
xoxo[47] = "images/portrait/fpo/48.jpg"
xoxo[48] = "images/portrait/fpo/49.jpg"
xoxo[49] = "images/portrait/fpo/50.jpg"
xoxo[50] = "images/portrait/fpo/51.jpg"
xoxo[51] = "images/portrait/fpo/52.jpg"
xoxo[52] = "images/portrait/fpo/53.jpg"
xoxo[53] = "images/portrait/fpo/54.jpg"
xoxo[54] = "images/portrait/fpo/55.jpg"
xoxo[55] = "images/portrait/fpo/56.jpg"
xoxo[56] = "images/portrait/fpo/57.jpg"
xoxo[57] = "images/portrait/fpo/58.jpg"
xoxo[58] = "images/portrait/fpo/59.jpg"
xoxo[59] = "images/portrait/fpo/60.jpg"
xoxo[60] = "images/portrait/fpo/61.jpg"
xoxo[61] = "images/portrait/fpo/62.jpg"
xoxo[62] = "images/portrait/fpo/63.jpg"
xoxo[63] = "images/portrait/fpo/64.jpg"
xoxo[64] = "images/portrait/fpo/65.jpg"
xoxo[65] = "images/portrait/fpo/66.jpg"
xoxo[66] = "images/portrait/fpo/67.jpg"
xoxo[67] = "images/portrait/fpo/68.jpg"
xoxo[68] = "images/portrait/fpo/69.jpg"
xoxo[69] = "images/fashion/fpo/01.jpg"
xoxo[70] = "images/fashion/fpo/02.jpg"
xoxo[71] = "images/fashion/fpo/03.jpg"
xoxo[72] = "images/fashion/fpo/04.jpg"
xoxo[73] = "images/fashion/fpo/05.jpg"
xoxo[74] = "images/fashion/fpo/06.jpg"
xoxo[75] = "images/fashion/fpo/07.jpg"
xoxo[76] = "images/fashion/fpo/08.jpg"
xoxo[77] = "images/fashion/fpo/09.jpg"
xoxo[78] = "images/fashion/fpo/10.jpg"
xoxo[79] = "images/fashion/fpo/11.jpg"
xoxo[80] = "images/fashion/fpo/12.jpg"
xoxo[81] = "images/fashion/fpo/13.jpg"
xoxo[82] = "images/fashion/fpo/14.jpg"
xoxo[83] = "images/fashion/fpo/15.jpg"
xoxo[84] = "images/fashion/fpo/16.jpg"
xoxo[85] = "images/fashion/fpo/17.jpg"
xoxo[86] = "images/fashion/fpo/18.jpg"
xoxo[87] = "images/fashion/fpo/19.jpg"
xoxo[88] = "images/fashion/fpo/20.jpg"
xoxo[89] = "images/fashion/fpo/21.jpg"
xoxo[90] = "images/fashion/fpo/22.jpg"
xoxo[91] = "images/fashion/fpo/23.jpg"
xoxo[92] = "images/fashion/fpo/24.jpg"
xoxo[93] = "images/fashion/fpo/25.jpg"
xoxo[94] = "images/fashion/fpo/26.jpg"
xoxo[95] = "images/fashion/fpo/27.jpg"
xoxo[96] = "images/fashion/fpo/28.jpg"
xoxo[97] = "images/fashion/fpo/29.jpg"
xoxo[98] = "images/fashion/fpo/30.jpg"
xoxo[99] = "images/fashion/fpo/31.jpg"
xoxo[100] = "images/fashion/fpo/32.jpg"
xoxo[101] = "images/fashion/fpo/33.jpg"
xoxo[102] = "images/fashion/fpo/34.jpg"
xoxo[103] = "images/fashion/fpo/35.jpg"
xoxo[104] = "images/fashion/fpo/36.jpg"
xoxo[105] = "images/fashion/fpo/37.jpg"
xoxo[106] = "images/fashion/fpo/38.jpg"
xoxo[107] = "images/fashion/fpo/39.jpg"
xoxo[108] = "images/fashion/fpo/40.jpg"
xoxo[109] = "images/fashion/fpo/41.jpg"
xoxo[110] = "images/fashion/fpo/42.jpg"
xoxo[111] = "images/fashion/fpo/43.jpg"
xoxo[112] = "images/fashion/fpo/44.jpg"
xoxo[113] = "images/fashion/fpo/45.jpg"
xoxo[114] = "images/fashion/fpo/46.jpg"
xoxo[115] = "images/fashion/fpo/47.jpg"
xoxo[116] = "images/fashion/fpo/48.jpg"
xoxo[117] = "images/fashion/fpo/49.jpg"
xoxo[118] = "images/fashion/fpo/50.jpg"
xoxo[119] = "images/fashion/fpo/51.jpg"
xoxo[120] = "images/fashion/fpo/52.jpg"
xoxo[121] = "images/fashion/fpo/53.jpg"
xoxo[122] = "images/fashion/fpo/54.jpg"
xoxo[123] = "images/fashion/fpo/55.jpg"
xoxo[124] = "images/fashion/fpo/56.jpg"
xoxo[125] = "images/fashion/fpo/57.jpg"
xoxo[126] = "images/fashion/fpo/58.jpg"
xoxo[127] = "images/fashion/fpo/59.jpg"
xoxo[128] = "images/fashion/fpo/60.jpg"
xoxo[129] = "images/fashion/fpo/61.jpg"
xoxo[130] = "images/fashion/fpo/62.jpg"
xoxo[131] = "images/fashion/fpo/63.jpg"
xoxo[132] = "images/fashion/fpo/64.jpg"
xoxo[133] = "images/fashion/fpo/65.jpg"
xoxo[134] = "images/fashion/fpo/66.jpg"
xoxo[135] = "images/fashion/fpo/67.jpg"
xoxo[136] = "images/fashion/fpo/68.jpg"
xoxo[137] = "images/fashion/fpo/69.jpg"
xoxo[138] = "images/children/fpo/01.jpg"
xoxo[139] = "images/children/fpo/02.jpg"
xoxo[140] = "images/children/fpo/03.jpg"
xoxo[141] = "images/children/fpo/04.jpg"
xoxo[142] = "images/children/fpo/05.jpg"
xoxo[143] = "images/children/fpo/06.jpg"
xoxo[144] = "images/children/fpo/07.jpg"
xoxo[145] = "images/children/fpo/08.jpg"
xoxo[146] = "images/children/fpo/09.jpg"
xoxo[147] = "images/children/fpo/10.jpg"
xoxo[148] = "images/children/fpo/11.jpg"
xoxo[149] = "images/children/fpo/12.jpg"
xoxo[150] = "images/children/fpo/13.jpg"
xoxo[151] = "images/children/fpo/14.jpg"
xoxo[152] = "images/children/fpo/15.jpg"
xoxo[153] = "images/children/fpo/16.jpg"
xoxo[154] = "images/children/fpo/17.jpg"
xoxo[155] = "images/children/fpo/18.jpg"
xoxo[156] = "images/children/fpo/19.jpg"
xoxo[157] = "images/children/fpo/20.jpg"
xoxo[158] = "images/children/fpo/21.jpg"
xoxo[159] = "images/children/fpo/22.jpg"
xoxo[160] = "images/children/fpo/23.jpg"
xoxo[161] = "images/children/fpo/24.jpg"
xoxo[162] = "images/children/fpo/25.jpg"
xoxo[163] = "images/children/fpo/26.jpg"
xoxo[164] = "images/children/fpo/27.jpg"
xoxo[165] = "images/children/fpo/28.jpg"
xoxo[166] = "images/children/fpo/29.jpg"
xoxo[167] = "images/children/fpo/30.jpg"
xoxo[168] = "images/children/fpo/31.jpg"
xoxo[169] = "images/children/fpo/32.jpg"
xoxo[170] = "images/children/fpo/33.jpg"
xoxo[171] = "images/children/fpo/34.jpg"
xoxo[172] = "images/children/fpo/35.jpg"
xoxo[173] = "images/children/fpo/36.jpg"
xoxo[174] = "images/children/fpo/37.jpg"
function pickRandom(range) {
if (Math.random)
return Math.round(Math.random() * (range-1));
else {
var now = new Date();
return (now.getTime() / 1000) % range;
}
}
// Write out an IMG tag, using a randomly-chosen image name.
var choice = pickRandom(xoxo.length);
// -->
</script>
<div class="menu">
<a style="color:#000000" href="index.html">Index</a><br>
<a href="portrait/overview.html">Portrait</a><br>
<a href="fashion/overview.html">Fashion</a><br>
<a href="children/overview.html">Children</a><br>
<a href="clients.html">Clients</a><br>
<a href="contact.html">Contact</a><br>
</div>
<table cellpadding="0" cellspacing="0" border="0" height="100%" width="100%">
<tr valign="middle"><td align="center">
<a href="index.html"><script type="text/javascript">document.writeln('<img src="'+xoxo[choice]+'" >');</script></a>
</td></tr>
</table>
Upvotes: 0
Views: 522
Answers (3)
sachleen
Reputation: 31131
If you really wanted to make sure an image is never repeated until all of them have been shown, you can store a list of indices you have already displayed using localstorage.
You can use
localStorage['viewedItems'] = JSON.stringify(viewedItems)
to save an array to localstorage, where viewedItems (the second one) is the name of the array containing all of the indices you have already shown. You can then use
JSON.parse(localStorage['viewedItems'])
to retrieve the array on every page load to see what you've already displayed. Every time, you're reading it, adding an index (pick an index until you get one not in this array), writing it. Once the size of the array has reached the number of images you have, clear it and start over.
Updated, and hopefully more detailed, explanation
First you want to load the viewedItems array from localStorage. Then pick a random number as you already do, and see if that number exists in viewedItems. You can do this using indexOf. The select a number and check if exists code will be in a loop so you keep doing it until you find a number that doesn't exist in your array. Show that index. You can then use the push method to add this index to your viewedItems array. Finally, save the viewedItems array to localStorage.
Pseudocode
load viewedItems from localStorage
do
r = random number
while viewedItems.indexOf(r) > -1
show xoxo[r]
viewedItems.push(r)
save viewedItems to localStorage
Upvotes: 1
HBP
Reputation: 16033
Since JavaScript numbers can hold integers of over 50 bits, 3 numbers could keep track of 150 files.
The following code provides functions for creating, manipulating and interrogating a data structure consisting of an array of 50 bit numbers:
function Set (len) {
// Establish an array of sufficient 50 bit numbers to hold len bits
this.bits = new Array (Math.floor ((len + 49) / 50));
this.len = len;
// Clear all numbers
for (var i = this.bits.length; i--;)
this.bits[i] = 0;
}
Set.prototype.full = function () {
// Check if all bits of the set at 1
// First check the relevant bits of the last word
if (this.bits[this.bits.length - 1] === Math.pow (2, this.len + 1) - 1)
// Then chec tat all remaining numbers are full
for (var i = this.bits.length - 1; i--;)
if (bits[i] !== Math.pow (2, 51) - 1)
return false;
return true;
}
Set.prototype.check = function (n) {
// Return value (0 or 1) of bit n of the set
var m = n % 50;
return Math.floor (this.bits [(n - m) / 50] / Math.pow (2, m)) & 1;
}
Set.prototype.add = function (n) {
// Set bit n of the set to 1 (unless it is already 1)
if (!this.check (n)) {
var m = n % 50;
this.bits [(n - m) / 50] += Math.pow (2, m);
return true;
}
return false;
}
Set.prototype.remove = function (n) {
// Set bit of the set to 0 (unless it is already 0)
if (this.check (n)) {
var m = n % 50;
this.bits [(n - m) / 50] -= Math.pow (2, m);
return true;
}
return false;
}
Set.prototype.clear = function () {
// Clear all bitsof the set to 0
for (var i = this.bits.length; i--;)
bits[i] = 0;
}
Upvotes: 0
rcplusplus
Reputation: 2877
This may not be the best solution, but give it a spin. Have a second array just as big as the first, but have it store booleans. The indexes from the second array correspond to the indexes from the first array. So when the script gives 24 as the random number, it should return the 25th image from the xoxo array, AND it should set the 25th element in the second array to false. For example:
// assume isAvailable is the array that holds the bools
function pickRandom(range) {
checkAvailabilities(); // checks to see if all the images have been used
if (Math.random) {
while (true) {
var choice = Math.round(Math.random() * (range-1));
if (isAvailable[choice]) {
isAvailable[choice] = false;
return choice;
}
}
}
else {
var now = new Date();
return (now.getTime() / 1000) % range;
}
}
function checkAvailabilities()
{
// check if there are still some images that haven't been chosen
for (var i = 0; i < isAvailable.length; i++)
if (isAvailable[i])
return;
// all the images have been used, so make all of them available again
for (var i = 0; i < isAvailable.length; i++)
isAvailable[i] = true;
}
Upvotes: 0
Related Questions
- Pulling a non-repeating, random image from an array
- How to display random multiple images not repeatedly in JS?
- Randomly select from remaining images inside the array while current image is displayed
- Random images load without repeat
- random image with Javascript without repeating
- show random image from array in javascript
- Random Image Display, Without Repeat, with Javascript
- Script to display an image selected at random from an array on page load
- How to display random images without repetition using javascript
- Random image with link on load, without loading them all