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加载图像（background：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);

上一次完成后加载下一张图像

1 个答案: