是否有可能在渲染之前在缓存中插入图像

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

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

请评论。

问候人士Himanshu夏尔马

来源

2012-01-12 techie_28

您可以预先加载图像，使它们在缓存中，以便它们可以立即用于鼠标事件等。有关预缓存图像阵列的示例代码，请参见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);

来源

2012-01-12 07:18:12 jfriend00

我们可以使用.cache访问缓存？ – 2012-01-12 07:26:24

@ techie_28 - 我不明白你的问题。此代码会创建图像对象，并将图像URL加载到其中。该过程会导致浏览器缓存图像，以便在页面中的其他位置使用这些图像URL时，它们将立即从浏览器缓存中加载。预加载它们之后，您只需正常使用URL，浏览器将自动从缓存中获取它们。你不会自己访问缓存 - 浏览器会为你做。 – jfriend00 2012-01-12 07:30:25

我的问题是什么.cache属性在这里？ – 2012-01-12 07:32:15

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

来源

2012-01-12 07:13:21

这会将图像放入缓存中吗？ – 2012-01-12 07:14:31

你的意思是......'新形象（）。src =“”' – 2012-01-12 07:15:20

不，这是有效的。它会使浏览器加载并缓存它:) – 2012-01-12 07:20:15

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

来源

2012-01-12 07:16:17 YuS

是否有可能在渲染之前在缓存中插入图像

回答

相关问题