上一张图片完成后加载下一张图片
上一张图片完成后加载下一张图片
提问于 2015-07-22 10:22:05
我正在尝试弄清楚如何将图像加载到按钮中，但在下载下一个图像之前，请等待前一个图像的下载。
我不想使用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;)
但不确定这是否会对我有帮助。对我来说，这只是创建按钮时加载图像的另一种方式。
谁能够帮助我加载图像只有当前一个图像已完成加载？
回答 1
Stack Overflow用户
发布于 2015-07-22 10:33:47
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);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/31552804
复制相关文章
相似问题
腾讯云开发者
