在iOS中使用javascript进行图像预加载

Question

方案

我使用两个图像，即'car-light.png'和'car-dark.png'。当用户触摸car-light.png图像时，它变为car-dark.png。

这是我使用的代码。

<img src="car-light.png" id="car" ontouchstart="changeCar()">

在changeCar（）中，我编写了这段代码

$("#car").attr('src','url(car-dark.png)');

问题

有没有办法通过预加载图像加快速度？或者我在加载快速时间方面做得太大了？如果是需要预加载的情况，以下代码是否正确？

var img1 = new Image();
img1.src = "car-dark.png";

function changeCar(imgName) 
{
    document[imgName] = img1;
}

和HTML

<img src="car-light.png" name="car" ontouchstart="changeCar('car')">

Answer 1

将它放在启动JS代码中的某个位置会预先加载图像：

var img1 = new Image();
img1.src = "car-dark.png";

这将导致图像位于浏览器缓存中，因此如果您稍后在页面操作中使用它，它将快速加载。您可以直接使用img1对象，但通常更容易使用URL并让浏览器从其内存缓存中获取图像，如下所示：

<img src="car-light.png" id="car" ontouchstart="changeCar()">

function changeCar() {
    $("#car").attr('src','car-dark.png');
}