javascript 在页面加载时显示从数组中随机选择的图像的脚本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5809188/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Script to display an image selected at random from an array on page load
提问by D Benway
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
版本 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>
Version 2
版本 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>
采纳答案by John Hoven
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. 1 预先加载所有图像（如果您要更改图像，做幻灯片类型的事情，则更有用）。所以它使用更多的带宽，会使你的页面加载速度变慢。
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.
2 看起来不错，但我可能会将 pickRandom(ic) 更改为 pickRandom(xoxo.length) 这样您就不必在添加更多图像时忘记更新 ic。
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.
您可能希望为用户 (lastImageIndex) 创建一个 cookie 以循环访问这些项目。如果 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++
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.
该描述与您要求的略有不同，因为它是针对每个用户的，但我敢打赌，它可以为您提供更多您正在寻找的结果。
回答by Jorgesys
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>
