title: Script to display an image selected at random from an array on page load
body: <p>I'm using a script on the homepage of a website for a photographer which displays an image selected at random from an array. I have found two different scripts which perform this function. I'd like to know which script is preferable and if it has been written correctly or can be improved. I wonder if it is possible to include a function that would prevent the same image from loading twice until all of the images in the array have been used. Thanks for taking a look.</p>
  
  <p>Version 1 </p>
  
  <p></p>
  
  <pre><code>    &lt;script type="text/javascript"&gt;
      &lt;!--
      var theImages = new Array() 
  
              theImages[1] = 'portrait/fpo/01.jpg'
              theImages[2] = 'portrait/fpo/02.jpg'
              theImages[3] = 'portrait/fpo/03.jpg'
              theImages[4] = 'portrait/fpo/04.jpg'
              theImages[5] = 'portrait/fpo/05.jpg'
              theImages[6] = 'portrait/fpo/06.jpg'
              theImages[7] = 'portrait/fpo/07.jpg'
              theImages[8] = 'portrait/fpo/08.jpg'
              theImages[9] = 'portrait/fpo/09.jpg'
              theImages[10] = 'portrait/fpo/10.jpg'
  
      var j = 0
      var p = theImages.length;
      var preBuffer = new Array()
      for (i = 0; i &lt; p; i++){
  
              preBuffer[i] = new Image()
              preBuffer[i].src = theImages[i]
      }
      var whichImage = Math.round(Math.random()*(p-1));
      function showImage(){
  
              document.write('&lt;img src="images/'+theImages[whichImage]+'"&gt;');
      }
      // --&gt;
      &lt;/script&gt;
  </code></pre>
  
  <p>
  </p>
  
  <pre><code>    &lt;table cellpadding="0" cellspacing="0" border="0" height="100%" width="100%"&gt;
      &lt;tr valign="middle"&gt;&lt;td align="center"&gt;
  
              &lt;a href="index.html"&gt;&lt;script type="text/javascript"&gt;showImage();&lt;/script&gt;&lt;/a&gt;
  
      &lt;/td&gt;&lt;/tr&gt;
      &lt;/table&gt;
  </code></pre>
  
  <p></p>
  
  <p>Version 2 </p>
  
  <p></p>
  
  <pre><code>    &lt;script type="text/javascript"&gt;
      &lt;!--
      var ic = 11; // Number of alternative images
      var xoxo = new Array(ic); // 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"
  
      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(ic);
      // --&gt;
      &lt;/script&gt;
  </code></pre>
  
  <p>
  </p>
  
  <pre><code>    &lt;table cellpadding="0" cellspacing="0" border="0" height="100%" width="100%"&gt;
      &lt;tr valign="middle"&gt;&lt;td align="center"&gt;
  
              &lt;a href="index-alternate.html"&gt;&lt;script type="text/javascript"&gt;document.writeln('&lt;img src="'+xoxo[choice]+'" &gt;');&lt;/script&gt;&lt;/a&gt;
  
      &lt;/td&gt;&lt;/tr&gt;
      &lt;/table&gt;
  </code></pre>
  
  <p></p>