如何预加载图像以便更快地转换

我正在使用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

如何预加载图像以便更快地转换

回答

相关问题