我正在运行一个脚本，每次刷新页面时都会随机加载数组中的图像。这个脚本的一个不受欢迎的特性，以及我在网上看到的所有其他类似的脚本，虽然阵列中有超过100个图像，但它经常在阵列中的所有图像都有多次加载相同的图像之前被人看过了。
我想改变脚本以防止在查看阵列中的所有图像之前调用相同的图像两次。如果一个完全不同于我在这里采取的方法是可取的，请告诉我。另外，我对javascript的理解很不错，所以如何彻底解释如何纠正这个问题将是最有帮助的。
提前致谢
以下是页面来源：
<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>
答案 0 :(得分：1)
如果你真的想确保图像在所有图像都显示之前从不重复，你可以使用localstorage存储已经显示的索引列表。
您可以使用
localStorage['viewedItems'] = JSON.stringify(viewedItems)
将数组保存到localstorage，其中seenItems（第二个）是包含您已经显示的所有索引的数组的名称。然后你可以使用
JSON.parse(localStorage['viewedItems'])
在每个页面加载时检索数组，以查看您已显示的内容。每次，你正在阅读它，添加一个索引（选择一个索引，直到你得到一个不在这个数组中），写它。一旦阵列的大小达到你拥有的图像数量，清除它并重新开始。
更新了，希望更详细，解释
首先，您要从viewedItems加载localStorage数组。然后选择一个随机数，并查看viewedItems中是否存在该数字。您可以使用indexOf执行此操作。选择一个数字并检查是否存在代码将在循环中，这样您就可以继续执行它，直到找到数组中不存在的数字。显示该索引。然后，您可以使用push方法将此索引添加到viewedItems数组中。最后，将viewedItems数组保存到localStorage。
<强>伪代码
load viewedItems from localStorage
do
r = random number
while viewedItems.indexOf(r) > -1
show xoxo[r]
viewedItems.push(r)
save viewedItems to localStorage
答案 1 :(得分：0)
这可能不是最佳解决方案，但要给它一个旋转。有第二个阵列和第一个一样大，但是它存储了布尔值。第二个数组的索引对应于第一个数组的索引。因此，当脚本给出24作为随机数时，它应该从xoxo数组返回第25个图像，并且它应该将第二个数组中的第25个元素设置为false。例如：
// 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;
}
答案 2 :(得分：0)
由于JavaScript数字可以保存超过50位的整数，因此3个数字可以跟踪150个文件。
以下代码提供了创建，操作和查询由50位数字组成的数据结构的函数：
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;
}