javascript - 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');
}