[英]JavaScript detect if image is in cache
我目前正在使用 jQuery 加载图像并在完全加载后将其淡入。 但是,我现在想检测我尝试加载的图像是否已经在浏览器缓存中 - 如果它在 3 秒后淡入。
有谁知道我怎么能做到这一点?
没有浏览器功能可以提前告诉您缓存中是否有内容。
如果您想要缓存它,您可以预加载它,以便在您下次想要使用它时很可能会缓存它,但是没有办法知道它是否已经被缓存。
您可以加载图像,然后计算是否立即加载,如果图像加载时间少于 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);
图像具有“完整”属性,如果图像从缓存中出来,该属性可能会立即为真。
http://www.w3.org/TR/html5/the-img-element.html#dom-img-complete
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.