Javascript切换图片轮播一轮后出现Undefined错误、图片短暂消失如何解决

• 索引操作顺序错误：代码优先给图片src赋值，再更新索引。当index值等于数组最大索引（示例中为2）时，更新后index变为3，下一次执行changeImage时会读取不存在的allPictures[3]（值为undefined），赋值给img的src后就会触发加载失败、页面空白，随后才会把index重置为0，所以间隔一段时间后功能恢复。
• 潜在DOM读取风险：script标签放在img元素之前，虽然当前加了load事件监听不会触发问题，但不符合最佳实践。

修改JS逻辑 #

调整索引更新和赋值的顺序，确保索引合法后再给图片src赋值，修改后代码如下：

var allPictures = ["imgA.jpg", "imgB.jpg", "imgC.jpg"];
var index = 0;

addEventListener("load",() => {
    setInterval(changeImage, 500);
});

function changeImage() {
    index += 1;
    if (index >= allPictures.length) {
        index = 0;
    }
    document.getElementById("galleryPicture").src = allPictures[index];
}

可选HTML优化 #

将script标签移到body末尾、img元素之后，避免后续修改代码去掉load监听时出现DOM读取失败的问题：

<div class="galleryPicture">
<img id="galleryPicture" src="imgA.jpg">
</div>
<script src="pictureSwapScript.js"></script>
</body>
</html>

修复后索引永远在0~2的合法范围内，不会再读取到undefined值，页面空白问题会完全消失。

内容的提问来源于stack exchange，提问作者Droemmelbert