Javascript 预加载图像以在稍后单击事件jQuery时显示

我有一个网页，其中许多图像调用从服务器使用图像 scr属性

我创建了一个类似的函数，它是由td单击触发的

function GoToStep(stepNo) {
 var imgSrc = $("#h1" + stepNo).val();
        $(".img_vertical").css("background-image", "url(" + imgSrc + ")");
}

现在的问题是这个。对于较慢的连接，图像在一些 片刻

我是否可以预加载图像以避免用户单击时的等待时间 td

我见过一些jquery函数来预加载图像

---

请告诉我如何实现它。

这可以使用一些javascript函数来实现。引用

---

预加载图像相当于加载图像但从不显示它。因此，您可以很容易地这样做：

<img src="image.png" alt="" style="display:none;"/>

---

现在，一旦html开始呈现，就会加载此图像。每当您需要使用此图像作为显示或背景时，只需将地址设置为image.png，它就会自动从浏览器的缓存中获取。

我认为该页面将很重（大小），因为我在该页面上至少有40个图像。我必须在每次td点击时更改同一div的背景图像。在页面加载时创建一个图像数组，然后在td click上更改图像是否是一个好主意。因为在显示图像之前必须预加载图像，因此页面必须很重。你不能停止它（即使你加载它们的正常方式，因为大小毕竟是固定的）。或者选择一个更好的系统设计，或者如果它是您能想到的最好的，那么尝试这里讨论的任何预加载选项。我的答案只是做这件事的线索，sshow的答案更好，因为它不会“破坏”DOM。你能给我举个例子，因为我为每个td创建了一个隐藏字段，并将imge scr保存在该隐藏字段中。现在我如何使用索引预加载？如果我已经预加载了图像，如何设置div的背景。你能给我提供它的语法吗？

preload（）

运行后，图像将被预加载。运行完函数后，就不必再考虑它了。

$(function() {
    // Do stuff when DOM is ready
    preload([
        'img/bg1.jpg',
        'img/bg2.jpg',
        'img/bg3.jpg'
    ]);
});

<img src="image.png" alt="" style="display:none;"/>