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);

Answer 2

图像有一个“完整”属性，如果图像从缓存中出来，可能会立即生效。

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

JavaScript检测图像是否在缓存中

2 个答案: