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

Question

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

我已经通过将图像 url 源硬编码到 JS 数组中成功构建了一个成功的程序，但这对于我编码的目的来说是不可能的，因为用户将决定将显示哪组图像。用户将无权访问 JS。所以数组将从 html 中获取图像源。我一直在尝试做的是使用“getElementByClassName”并通过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 返回一个“实时列表”，因此您可以在图像存在之前获取它们，并且它们'当它们加载到文档中时就会出现。

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

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