JavaScript检测图像是否在缓存中

我目前使用jQuery加载图像，并在其完全加载后淡入图像。但是，我现在想要检测我要加载的映像是否已经存在于浏览器缓存中 - 并且如果它在3秒后淡入，请参阅。JavaScript检测图像是否在缓存中

有谁知道我该怎么做？

2012-11-25 user14377

如果您尝试加载它，它是在缓存中，它只是看起来像它加载瞬间。你为什么需要改变任何东西？ – Xymostech

你是否试图模拟图像不被缓存？ – David

浏览器缓存是透明的。所有图像和其他网络资源都通过缓存来访问，但浏览器设置不能被js读/写。因此，没有可靠的方法来确定图像是否已被新鲜加载到缓存中，或者是否响应先前的请求而加载。你可以做的最好的办法是鼓励通过在源代码中添加一个唯一的查询字符串来从源代码刷新图像。这是不鼓励的，并且在任何情况下都不可靠，因为浏览器和主机之间的任何数量的Web缓存可能会选择忽略查询字符串并以“未更改”作出响应。 –

没有浏览器功能可以提前告诉你是否存在缓存中的内容。

如果你想缓存，你可以预先加载它，这样当你下一次想要使用它时，它很可能会被缓存，但是无法知道它是否已经被缓存了。

您可以加载图像，然后确定是否立即加载图像，如果图像加载速度小于1秒（可能来自缓存）或更长时间（可能通过图像加载网络）。这将涉及短时间设置onload处理程序和setTimeout()，并根据先发生的情况采取行动。

一如既往，如果您向我们描述您真正要解决的问题，我们可以给您更好的建议。

如果你想做的事情（这只是猜测你的问题）是在3秒内（如果它被缓存）或加载时（如果它没有被缓存）淡入图像，则你可以用这样的代码来做到这一点：

工作演示：http://jsfiddle.net/jfriend00/XqJpT/

function now() { 
    return (new Date()).getTime(); 
} 

function fadeMe(img, always) { 
    var self = $(img); 
    if (!self.data("faded") && (always || (now() - self.data("baseTime") >= 3000))) { 
     self.fadeIn(); 
     self.data("faded", true); 
    } 
} 

var img = $('<img class="initiallyHidden">') 
    .data({ 
     baseTime: now(), 
     faded: false, 
     loaded: false 
    }) 
    .appendTo(document.body) 
    .load(function() { 
     $(this).data("loaded", true); 
     fadeMe(this, false); 
    }) 
    .attr("src", "http://photos.smugmug.com/photos/344291068_HdnTo-S.jpg"); 

setTimeout(function() { 
    if (img.data("loaded")) { 
     fadeMe(img, true); 
    } 
}, 3000);

来源

2012-11-25 23:15:03 jfriend00