是否可以在渲染之前将图像插入缓存中答案

【问题标题】：Is it possible to insert images in cache before rendering是否可以在渲染之前将图像插入缓存中
【发布时间】：2012-01-12 15:18:12
【问题描述】：

我有这个网页，它向我展示了一些图像，一些图像在鼠标悬停事件中，因此它们需要时间才能显示。我已经通过放置鼠标悬停图像并通过显示无属性隐藏它们来解决它，该属性将它们放入浏览器缓存并在鼠标悬停时快速显示它们。我在想是否可以通过另一种方式将图像插入浏览器的缓存使用 jQuery 或其他东西，所以我不必以隐藏形式放置图像。

我不知道这是不是一个愚蠢的问题。

请发表评论。

问候希曼舒·夏尔马

【问题讨论】：

标签： javascript jquery html caching

【解决方案1】：

您可以预加载图像，这将导致它们在缓存中，以便它们可以立即用于诸如鼠标事件之类的事情。有关预缓存图像数组的示例代码，请参阅 this post。

function preloadImages(srcs) {
    if (!preloadImages.cache) {
        preloadImages.cache = [];
    }
    var img;
    for (var i = 0; i < srcs.length; i++) {
        img = new Image();
        img.src = srcs[i];
        preloadImages.cache.push(img);
    }
}

// then to call it, you would use this
var imageSrcs = ["src1", "src2", "src3", "src4"];

preloadImages(imageSrcs);

【讨论】：

我们可以使用 .cache 访问缓存吗？
@techie_28 - 我不明白你的问题。此代码使用加载到其中的图像 URL 创建图像对象。该过程会导致浏览器缓存图像，以便当这些图像 URL 在页面的其他位置使用时，它们会立即从浏览器缓存中加载。预加载后，您只需正常使用 URL，浏览器会自动从缓存中获取它们。您自己不会访问缓存 - 浏览器会为您完成。
我的问题是这里的 .cache 属性是什么？
@techie_28 - .cache 属性只是一个图像对象数组，其中存储图像对象，以便它们可以加载图像。它是函数的一个属性，用于避免创建另一个全局变量。

【解决方案2】：

您可以只使用(new Image).src="http://path/to/img.jpg"，这将使浏览器加载它

【讨论】：

这会将图像放入缓存中吗？
你的意思是...new Image().src=""
不，那行得通。它会让浏览器加载并缓存它:)

【解决方案3】：

首先，为小图像和/或“鼠标悬停”图像使用精灵。另外，是的，您可以使用 javascript 预加载图像，但请记住页面加载顺序，因此它可能不会比 css 快。

【讨论】：