使用JavaScript预加载和更改图像

我试图制作一些基本的图像滑块作为JS练习的一部分，当我运行这个脚本时，我注意到一些奇怪的事情

当我试图用“setAttribute”方法在html代码中更改源图像时，存储在0索引下数组中的图像的源正在更改，因此当我想从第五个图像返回到第二个图像时，这个原始滑块（此时没有滑动）被卡在第二个图像上

我的文件名为0.jpg-5.jpg

我已经预装了要平滑显示的图像，没有闪烁，我在页面加载后显示一个图像，然后我尝试将此图像的源更改为图像数组中下一个图像的源。这样做对吗

代码如下：

var images = new Array(5);
var i=0;
function addImages(){
       for (var j=0;j<images.length;j++){
        images[j] = new Image();
        images[j].src = j+".jpg";
        console.log(images[j].src);
    }
    var article = document.getElementById("article");
    article.insertBefore(images[0], document.getElementById("nav"));
}
function next(){
    if (i<images.length-1){
        document.getElementsByTagName('img')[0].setAttribute('src',images[++i].src);
        console.log(images[0].src);
}}
function prev(){
if (i>0){
        document.getElementsByTagName('img')[0].setAttribute('src', images[--i].src);
        console.log(images[0].src);
    }
}

我想知道这是否被认为是一种不好的做法，以及在单行代码中有哪些其他方法可以做到这一点

---

提前感谢，并为语法错误感到抱歉。

您只需插入空图像即可

<img id="someid"> 

---

如果您想查看代码，可以使用以下选项。

<img id="someid"> 

images[0].onload=function()
{
    document.getElementById("someid").src=images[0].src;
}