是否可以在渲染前将图像插入缓存

Is it possible to insert images in cache before rendering

本文关键字：图像 插入 缓存 是否      更新时间：2023-09-26

我有一个网页，它向我显示了一些图像，一些图像在鼠标悬停事件中，因此显示它们需要时间。我通过放置mouseover图像并通过display-none属性隐藏它们来解决这个问题，该属性将它们放在浏览器缓存中，并在mouseover上快速显示它们。我在想，有没有可能通过另一种方式将图像插入浏览器的缓存中，比如使用jQuery或其他东西，这样我就不必将图像隐藏起来

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

请评论。

问候Himanshu Sharma

您可以预加载图像，这将使它们在缓存中，这样它们就可以立即用于鼠标事件。有关预缓存图像数组的示例代码，请参阅本文。

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);

您只需使用(new Image).src="http://path/to/img.jpg"即可使浏览器加载

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

相关文章：