javascript - すべてが表示されるまで何も繰り返さずに、配列からランダムに画像をロードするスクリプト

Question

ページが更新されるたびに配列から画像をランダムにロードするスクリプトを実行しています。このスクリプト、および私がオンラインで見た他のすべてのスクリプトの望ましくない機能は、配列に100を超える画像がありますが、配列内のすべての画像が読み込まれる前に、同じ画像を何度も読み込むことが多いことです。閲覧されました。

配列内のすべての画像が表示される前に同じ画像が2回呼び出されないように、スクリプトを変更したいと思います。私がここで取ったものとはまったく異なるアプローチが望ましい場合は、私に知らせてください。また、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>

Answer 1

すべてが表示されるまで画像が繰り返されないようにしたい場合は、を使用して、すでに表示したインデックスのリストを保存できますlocalstorage。

使用できます

localStorage['viewedItems'] = JSON.stringify(viewedItems)

配列をに保存しますlocalstorage。viewedItems（2番目の項目）は、すでに表示したすべてのインデックスを含む配列の名前です。その後、使用することができます

JSON.parse(localStorage['viewedItems'])

ページが読み込まれるたびに配列を取得して、すでに表示されているものを確認します。毎回、それを読み取り、インデックスを追加し（この配列にないものが得られるまでインデックスを選択します）、書き込みます。配列のサイズが画像の数に達したら、それをクリアして最初からやり直します。

更新された、できればより詳細な説明

まず、viewedItemsから配列をロードしlocalStorageます。次に、すでに行っているように乱数を選択し、その番号がに存在するかどうかを確認しviewedItemsます。indexOfを使用してこれを行うことができます。番号を選択し、存在するかどうかを確認するコードがループに含まれるため、配列に存在しない番号が見つかるまでそれを繰り返します。そのインデックスを表示します。次に、pushviewedItemsメソッドを使用して、このインデックスを配列に追加できます。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

Answer 2

これは最善の解決策ではないかもしれませんが、試してみてください。最初の配列と同じ大きさの2番目の配列を用意しますが、ブール値を格納します。2番目の配列のインデックスは、最初の配列のインデックスに対応しています。したがって、スクリプトが乱数として24を指定する場合、配列から25番目の画像を返し、xoxo2番目の配列の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;
}

Answer 3

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;
}