javascript - 上一张图像完成后加载下一张图像

Question

我正在尝试弄清楚如何将图像加载到按钮中，但在下载下一张图像之前等待上一张图像下载。

我不想为此使用 jQuery。

我目前正在将图像加载到如下按钮:

<button onclick="icon1();"><img src="icon1.png"/></button>
<button onclick="icon2();"><img src="icon2.png"/></button>
<button onclick="icon3();"><img src="icon3.png"/></button>
<button onclick="icon4();"><img src="icon4.png"/></button>
<button onclick="icon5();"><img src="icon5.png"/></button>
<button onclick="icon6();"><img src="icon6.png"/></button>
<button onclick="icon7();"><img src="icon7.png"/></button>
<button onclick="icon8();"><img src="icon8.png"/></button>

我怎样才能让它先下载 icon1.png，然后一旦它完成加载该图像，然后下载 icon2.png 然后一旦完成下载 icon3.png 下载下一个等等，而不是在页面打开的同一时间。

我在网上看过示例，但它只显示了我不想使用的 jQuery。

我正在考虑使用 CSS 加载图像(背景:url(icon1.png) no-repeat;)

但不确定这是否对我有帮助。在我看来，这只是创建按钮时加载图像的另一种方式。

只有在上一张图片加载完成后，谁能帮我加载图片？

Answer 1

var imgSources = ['icon1.png', 'icon2.png', 'icon3.png'];
function loadNext(index){
    var tempImg = new Image();
    tempImg.onload = function() {
        /*Assuming You have experience in Javascript Dom manipulation*/
        //Assign the image to Dom.
        //img1.src = this.src;

        if(++index < imgSources.length)loadNext(index);
    }
    tempImg.src =  imgSources[index];
}
loadNext(0);