Question

单击单选按钮时，我使用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>

Answer 1

预加载图片：

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

图像将被下载并存储在缓存中以供使用。

Answer 2

当然，只需制作一组图像，然后再引用它们。代码行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中使用，就是如何收集预加载的图像。

如何预加载图像以加快转换速度

2 个答案: