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

Answer 2

圖像具有“完整”屬性，如果圖像從緩存中出來，該屬性可能會立即為真。

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