在 iOS 中使用 javascript 预加载图像

Posted 2023-03-15

【中文标题】在 iOS 中使用 javascript 预加载图像

【英文标题】：Image preloading with javascript in iOS

【发布时间】：2011-11-04 05:29:54

【问题描述】：

场景

我使用两个图像，即“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')">

【参考方案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');

【讨论】：

我在 onBodyLoad() 中添加了前两行。但是， $("#car").attr('src','car-dark.png') 返回了 ?而不是图像。不应该有一个url（car-dark.png）吗？另外，那么创建 img1 图像对象有什么意义呢？

前两行 javascript 应该在页面加载时立即执行（您不需要等待页面加载来执行它们）。这行 JS $("#car").attr('src','car-dark.png'); 将在一段时间后执行以响应某些用户操作。你不要在它周围使用url()，除非这是你的应用程序中的一些特殊功能。它不是一个标准，所以我不熟悉它或为什么会使用它。