在页面加载时显示从数组中随机选择的图像的脚本答案

【问题标题】：Script to display an image selected at random from an array on page load在页面加载时显示从数组中随机选择的图像的脚本
【发布时间】：2011-04-27 19:05:29
【问题描述】：

我正在为摄影师使用网站主页上的脚本，该脚本显示从数组中随机选择的图像。我发现了两个执行此功能的不同脚本。我想知道哪个脚本更可取，以及它是否编写正确或可以改进。我想知道是否可以包含一个函数，该函数会阻止同一图像加载两次，直到数组中的所有图像都被使用。感谢您的观看。

版本 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" cellspacing="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>

第 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>

【问题讨论】：

您在第一个版本中丢失了一张照片，仅供参考。我会选择 2。1 是预先加载所有图像（如果您在页面加载时更改图像，则更有用）。所以它使用更多的带宽，会使你的页面加载速度变慢。

标签： javascript

【解决方案1】：

此代码将随机加载图像以及要加载的相应链接。

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

【讨论】：

【解决方案2】：

决定给出答案。

仅供参考...您在第一个版本中缺少一张照片，仅供参考。

我会选择 2。1 是预先加载所有图像（如果您要更改图像，做幻灯片类型的事情会更有用）。所以它使用更多的带宽，会使你的页面加载速度变慢。

2 看起来不错，但我可能会将 pickRandom(ic) 更改为 pickRandom(xoxo.length)，这样您就不必在添加更多图像时忘记更新 ic。

您可能希望为用户创建一个 cookie (lastImageIndex) 以循环访问项目。如果 cookie 不可用，只需使用随机图像。否则，从随机图像开始。然后每次使用 cookie 增量访问。当你到达长度时，回到 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++

该描述与您所要求的略有不同，因为它是针对每个用户的，但我敢打赌它会为您提供更多您正在寻找的结果。

【讨论】：

这很有帮助。谢谢本杰尼托。如果我按照您的建议将 pickRandom(ic) 更改为 pickRandom(xoxo.length)，我会将“var ic = 179; // 替代图像的数量”和“var xoxo = new Array(ic); // Array 更改为保存文件名”到？
你可能只是摆脱 ic 并制作 var xoxo = new Array();或者 var xoxo = new Array(17);它所做的只是声明数组的初始大小。如果你过去，它不会阻止/无关紧要。
不客气，cookie 的想法是否足以让您开始使用它？我的算法是： function getCookieValue(choice){ // 在这里读取 cookie，如果找到，分配给选择 // 然后返回选择（原始值或更新）返回选择； } 变种选择 = pickRandom(xoxo.length);选择 = getCookieValue(选择); // 检查它是否对应于图像 if (choice >= xoxo.length)choice = 0; // 在这里存储 cookie。店铺选择++
是的，您关于使用 cookie 的建议在概念上对我来说很有意义。在我知道如何在页面中实现它们的功能之前，我需要对如何使用它们做更多的研究，因为我对如何做到这一点几乎一无所知。你当然给了我一个方向。
benjynito，我突然想到，在禁用 javascript 的情况下访问此页面的用户只会看到 html 元素（菜单），因为我依靠 javascript 来显示图像。如果访问者禁用了 javascript，有没有办法将访问者重定向到基于 html 的页面？