如何預加載圖像以便更快地轉換

我正在使用Javascript更改單擊單選按鈕時的圖像。當您第一次加載頁面時，每個單選按鈕被點擊後會延遲，然後平穩運行。我猜這是從它沒有加載圖像，直到收音機被點擊，我想知道是否有辦法做到這一點。的JavaScript如下：如何預加載圖像以便更快地轉換

<script type="text/javascript"> 


var switchingImage; 
var productid; 

function changeImage() 
    { 
    switchingImage.src = this.value; 
    productId.value = this.alt; 
    } 


window.onload = function() { 
var radios = document.getElementById('imageSwitcher').getElementsByTagName('input'); 
var products = document.getElementById('imageSwitcher').getElementsByTagName('alt'); 

switchingImage = document.getElementById('imageToSwitch'); 
productId = document.getElementById('productToSwitch'); 

for(var i=0;i<radios.length;i++) 
{ 
    radios[i].onclick = changeImage; 
} 
} 

</script>

來源

2012-02-01 Thomas Pool

看看[這篇文章]（http://stackoverflow.com/questions/2936778/jquery-preload-an-image-on-request-with-a-callback-function）。 – Oybek 2012-02-01 21:53:43

要預裝的圖像：

new Image().src = "path/to/file/image.png";

的圖像將被下載並存儲在緩存中使用。

來源

2012-02-01 21:52:58

當然，只需製作一組圖像，然後再引用它們。代碼行switchingImage.src = this.value;將改爲引用該數組。將預加載的圖像放入陣列時，請務必使用new關鍵字。例如：

var preLoad = new Array(); 
var firstImage = new Image(); 
firstImage.src = "someLocation/thisImage.jpg"; 
preLoad.push(firstImage);

做這所有的圖像，然後引用數組preLoad[imageNumber].src用於switchingImage.src是預裝的圖像將如何被收集。

來源

2012-02-01 21:55:48

如何預加載圖像以便更快地轉換

回答

相關問題