预加载图像以稍后在单击事件 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，它将自动从浏览器的缓存中获取。

Answer 2

这可以使用一些 JavaScript 函数来完成。引用另一个问题。

function preload(arrayOfImages) {
    $(arrayOfImages).each(function(){
        $('<img/>')[0].src = this;
        // Alternatively you could use:
        // (new Image()).src = this;
    });
}

// Usage:

preload([
    'img/imageName.jpg',
    'img/anotherOne.jpg',
    'img/blahblahblah.jpg'
]);

解释 JavaScript 预加载器的工作原理（不同的问题）

[...] 它的工作方式很简单，就是创建一个新的 Image 对象并设置
它的src，浏览器将去抓取图像。我们不是
将这个特定的图像添加到浏览器中，但是当时间到来时
通过我们设置的任何方法在页面中显示图像，
浏览器已经将其保存在缓存中，并且不会去获取它
再次。 [...]

所以在你的情况下，你应该使用类似的东西

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