加载下一个图像一旦上一个已经完成

Load next image once previous has finished

本文关键字：上一个 下一个 图像 加载      更新时间：2023-09-26

我想弄清楚如何将图像加载到按钮中，但在下载下一个图像之前等待前一个图像下载。

我不想用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;)

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

谁能帮我加载图像只有当前一个图像完成加载?

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);
相关文章：