Question

我正在尝试创建一个JavaScript，可以在页面刷新时随机化图像。我对JS并不熟悉，所以我遇到了一些麻烦。

我通过将图像url源硬编码到JS数组中成功构建了一个成功的程序，但这不是我编码的可能性，因为用户将决定显示哪些图像集。用户将无法访问JS。因此数组将从html获取图像源。我一直试图做的是使用＆＃34; getElementByClassName＆＃34;并通过for循环插入到数组中。但它似乎并没有起作用。我确信有更有效的方法可以做到这一点，所以请随时给我启发。

这是我到目前为止的代码：

<!-- Images to put into JS Array -->
<img class="header" src="/image1.jpg" style="display: none;" />
<img class="header" src="/image2.jpg" style="display: none;" />
<img class="header" src="/image3.jpg" style="display: none;" />

<!-- Image placeholder -->
<img src="/image1.jpg" id="rotate" />

JavaScript在一个单独的文档中：

// Javascript code
window.onload = chooseHeader;

var imgs = document.getElementsByClassName("header");
var headers = new Array();

for (var i = 0; i < imgs.length; i++) {
    headers.push(imgs[i].src);
}


function chooseHeader() {
    rand = Math.floor((Math.random() * headers.length));
    document.getElementById("rotate").src = headers[rand];
}

任何建议都将不胜感激！

Answer 1

您的代码可能在加载DOM之前运行。

您实际上并不需要Array，因为getElementsByClassName会返回“实时列表”，您可以在它们存在之前获取图像，并且它们会在它们出现时出现加载到文档中。

因此，如果是这种情况，解决方案是直接从src获取imgs。

window.onload = chooseHeader;

// live list
var imgs = document.getElementsByClassName("header");

function chooseHeader() {
    var rand = Math.floor((Math.random() * imgs.length));
    document.getElementById("rotate").src = imgs[rand].src;
}

<img class=header src="https://dummyimage.com/50/f00/fff.jpg">
<img class=header src="https://dummyimage.com/50/0f0/fff.jpg">
<img class=header src="https://dummyimage.com/50/00f/fff.jpg">
<br><br>
Rotate:
<br><br>
<img id=rotate src="">

按类名将图像src插入Javascript数组

1 个答案: