Note that there are some explanatory texts on larger screens.

plurals
  1. POScript to display an image selected at random from an array on page load
    primarykey
    data
    text
    <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>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload