预加载图像以稍后在单击事件 jQuery 上显示答案

【问题标题】：Pre Load images to display later on click event jQuery预加载图像以稍后在单击事件 jQuery 上显示
【发布时间】：2014-10-28 22:11:37
【问题描述】：

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

我创建了一个类似 td click 触发的函数。

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

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

我能否预加载图片以避免用户点击时的等待时间 td？

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

请提供一些想法，我该如何实现它。

【问题讨论】：

标签： javascript jquery html css image-preloader

【解决方案1】：

预加载图片相当于加载图片但从不显示。所以，你可以像这样轻松地做到这一点：

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

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

【讨论】：

我认为页面会很重（大小），因为页面上至少有 40 张图片。我必须在每次 td 点击时更改同一 div 的背景图像。在页面加载时创建一个图像数组，然后在 td 点击时更改图像是否是个好主意。
因为您必须在显示之前预加载图像，因此页面必须很重。您无法停止它（即使您以正常方式加载它们，因为毕竟大小是固定的）。要么为系统选择一个更好的设计，或者如果它是你能想到的最好的，然后尝试这里讨论的任何预加载选项。我的回答只是这样做的线索，sshow 的回答更好，因为它不会“破坏”DOM。

【解决方案2】：

这可以使用一些 javascript 函数来完成。引用自another question。

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 预加载器的工作原理 (different question)

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

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

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

【讨论】：

你能给我一些例子吗，因为我为每个 td 创建了一个隐藏字段并将 imge-scr 保存在该隐藏字段中。
现在如何使用索引预加载？如果我已预加载图像，如何设置 div 的背景。你能给我它的语法吗？
preload() 运行后，图像被预加载。运行完函数就不用再考虑了。