JavaScript 检测图像是否在缓存中

Question

我目前正在使用 jQuery 加载图像并在完全加载后淡入淡出。但是，我现在想检测我尝试加载的图像是否已经在浏览器缓存中 - 如果它在 3 秒后淡入。

有人知道我该怎么做吗？

Answer 1

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

如果你想缓存它，你可以预加载它，这样当你下次想使用它时它很可能被缓存，但是没有办法知道它是否已经被缓存。

您可以加载图像，然后计算它是否立即加载，如果图像加载时间少于 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);