加载下一个图像一次前一个完成

我想解决如何加载图像到一个按钮，但等待先前的图像下载之前，下载下一个图像。加载下一个图像一次前一个完成

我不想为此使用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的图像（背景：网址（icon1.png）不重复;）

但如果是要帮我不能肯定。听起来对我来说，这只是在创建按钮时加载图像的另一种方式。

任何人都能够帮助我加载图像只有当上一图像完成加载？

来源

2015-07-22 Aaron

请问为什么你反对jQuery？ – David

如果你在CSS中这样做，你将不会有任何控制，浏览器渲染引擎将决定。你必须使用JavaScript。 – Brian

@Math Nerd Productions我将它加载到一个产品上，并且jQuery文件太大而无法加载到它上面，所以我需要以某种方式在没有jQuery的情况下工作。我想使用jQuery，但我是有限的。 – Aaron

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);

来源

2015-07-22 02:33:47

加载下一个图像一次前一个完成

回答

相关问题