javascript - 预加载图像以稍后在 jQuery 的点击事件中显示

Question

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

我已经创建了一个由 td click 触发的函数。

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

现在的问题是这样的。对于较慢的连接，图像会在一些之后出现 片刻。

我可以预加载图片以避免用户点击时的等待时间吗 td?

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

请告诉我如何实现它。

Answer 1

预加载图像相当于加载图像但不显示它。所以，你可以很容易地这样做:

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

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