上一个完成后加载下一个图像答案

【问题标题】：Load next image once previous has finished上一个完成后加载下一个图像
【发布时间】：2015-07-22 10:48:58
【问题描述】：

我正在尝试研究如何将图像加载到按钮中，但在下载下一个图像之前等待上一个图像下载。

我不想为此使用 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;）

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

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

【问题讨论】：

请问你为什么反对 jQuery？
如果您在 css 中执行此操作，您将无法控制，浏览器渲染引擎将决定。你必须使用 javascript。
@Math Nerd Productions 我正在将它加载到一个产品上，而 jQuery 文件太大而无法加载到它上面，所以我需要在没有 jQuery 的情况下以某种方式工作。我想使用 jQuery，但我的能力有限。

标签： javascript css image

【解决方案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);

【讨论】：