javascript - JavaScript 检测图像是否在缓存中

Question

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

有谁知道我该怎么做？

Answer 1

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

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

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

与往常一样，如果您向我们描述您真正想要解决的问题，我们可能会给您更好的建议。

如果您想要做的（这只是阅读您的问题的猜测）是在 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);

​</p>

Answer 2

图像具有“完整”属性，如果图像从缓存中出来，它可能会立即为真。

http://www.w3.org/TR/html5/the-img-element.html#dom-img-complete