渲染前是否可以将图像插入缓存？(Is it possible to insert images in cache before rendering)

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

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

请给出意见。

关心Himanshu夏尔马

I have this webpage which shows me some images and some images are on a mouseover event and hence it takes time for them to display. I have worked it around by placing the mouseover image and hidding them through display none property which puts them in browsers cache and display them quickly on mouseover.I was thinking that is it possible to insert the images into cache of a browser by another way like using jQuery or something so i dont have to put images in hidden form.

I dont know if this is a stupid question.

Please comment.

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

You can preload images which will cause them to be in the cache so they are available immediately for things like mouse events. See this post for sample code that pre-caches an array of images.

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);渲染前是否可以将图像插入缓存？(Is it possible to insert images in cache before rendering)

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

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

请给出意见。

关心Himanshu夏尔马

I have this webpage which shows me some images and some images are on a mouseover event and hence it takes time for them to display. I have worked it around by placing the mouseover image and hidding them through display none property which puts them in browsers cache and display them quickly on mouseover.I was thinking that is it possible to insert the images into cache of a browser by another way like using jQuery or something so i dont have to put images in hidden form.

I dont know if this is a stupid question.

Please comment.

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

You can preload images which will cause them to be in the cache so they are available immediately for things like mouse events. See this post for sample code that pre-caches an array of images.

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