Script to display an image selected at random from an array on page load_问答_开发者

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.

Version 1

    <script type="text/javascript">
    <!--
    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 < p; i++){

            preBuffer[i] = new Image()
            preBuffer[i].src = theImages[i]
    }
    var whichImage = Math.round(Math.random()*(p-1));
    function showImage(){

            document.write('<img src="images/'+theImages[whichImage]+'">');
    }
    // -->
    </script>

    <table cellpadding="0" cell开发者_如何转开发spacing="0" border="0" height="100%" width="100%">
    <tr valign="middle"><td align="center">

            <a href="index.html"><script type="text/javascript">showImage();</script></a>

    </td></tr>
    </table>

Version 2

    <script type="text/javascript">
    <!--
    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);
    // -->
    </script>

    <table cellpadding="0" cellspacing="0" border="0" height="100%" width="100%">
    <tr valign="middle"><td align="center">

            <a href="index-alternate.html"><script type="text/javascript">document.writeln('<img src="'+xoxo[choice]+'" >');</script></a>

    </td></tr>
    </table>

This code will load images randomly and his respective link to load.

<html>
<head/>
<title>Jorgesys Android</title>
<script type="text/javascript">
  var imageUrls = [
       "http://stacktoheap.com/images/stackoverflow.png"
     , "http://stacktoheap.com/images/stackoverflow.png"
     , "http://stacktoheap.com/images/stackoverflow.png"
     , "http://stacktoheap.com/images/stackoverflow.png"
     , "http://stacktoheap.com/images/stackoverflow.png"
     , "http://stacktoheap.com/images/stackoverflow.png"
  ];
 var imageLinks = [
       "http://www.stackoverflow.com"
      , "http://www.reforma.com"
       , "http://www.nytimes.com/"
      , "http://www.elnorte.com/"
      , "http://www.lefigaro.fr/international/"
     , "http://www.spiegel.de/international/"    
  ];

  function getImageHtmlCode() {
    var dataIndex = Math.floor(Math.random() * imageUrls.length);
    var img = '<a href=\"' + imageLinks[dataIndex] + '"><img src="';        
    img += imageUrls[dataIndex];
    img += '\" alt=\"Jorgesys Android\"/></a>';
    return img;
  }
</script>
</head>
<body bgcolor="black">
<script type="text/javascript">
  document.write(getImageHtmlCode());
</script>
</body>
</html>

Decided to make it an answer.

FYI... You're missing one of your pictures in the first version, fyi.

I would go with 2. 1 is loading all of the images up front (more useful if you'll be changing images, doing a slide-show type thing). So it uses more bandwidth and will make your page load slower.

2 looks fine but I might change pickRandom(ic) to pickRandom(xoxo.length) so you don't have to forget about updating ic as you add more images.

You would probably want either to create a cookie for the user (lastImageIndex) to loop through the items. If cookies aren't available, just use a random image. Otherwise, start at a random image. Then each time accessed with the cookie increment. When you reach the length, go back to 0.

function getCookieValue(choice){
  // read cookie here, if found, parseInt(cookieValue,10) and assign to choice

  // Then return choice (either original value or updated)
  return choice;
}

var choice = pickRandom(xoxo.length);
choice = getCookieValue(choice);
// Check if it correspond to an image
if (choice >= xoxo.length) choice = 0;

// Store the cookie here.  Store choice++

That description is slightly different than what you asked for, since its per user, but I'd bet it gives you more the result you are looking for.