在iOS中使用JavaScript预加载图片

Question

Scenario

I use two images namely 'car-light.png' and 'car-dark.png'. When user touches the image, which was car-light.png, it becomes car-dark.png.

Here is the code I used.

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

In changeCar(), I wrote this code

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

Question

Is there a way to speed this up by preloading the image? Or am I making too big a deal with fast loading time? If it is the case where pre-loading is necessary, is the following code correct?

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

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

and in HTML

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

Answer 1

Putting this somewhere in your startup JS code will preload the image:

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

This will cause the image to be in the browser cache so it will load quickly if you use it later on in the action of the page. You could use the img1 object directly, but often it's easier to just use the URL and let the browser fetch the image from it's memory cache like this:

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

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