加載下一個圖像一次前一個完成

我想解決如何加載圖像到一個按鈕，但等待先前的圖像下載之前，下載下一個圖像。加載下一個圖像一次前一個完成

我不想爲此使用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

加載下一個圖像一次前一個完成

回答

相關問題