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

问题描述

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

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.

请评论。

问候
Himanshu Sharma

Regards Himanshu Sharma

推荐答案

您可以预载图像，这些图像会导致它们位于缓存中，以便它们可以立即用于鼠标事件等。请参阅此文章用于预缓存图像数组的示例代码。

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

这篇关于渲染前是否可以将图像插入缓存？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！