3

現在、jQueryを使用して画像を読み込み、完全に読み込まれるとフェードインします。ただし、ロードしようとしている画像が既にブラウザのキャッシュにあるかどうかを検出したいのですが、3秒後にフェードインするかどうかを確認します。

誰かが私がこれを行う方法を知っていますか？

4

2 に答える 2

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

</p>

于 2012-11-25T23:15:03.197 に答える
1

画像には、画像がキャッシュから出てきた場合にすぐに true になると思われる "complete" プロパティがあります。

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

于 2012-11-26T01:14:22.860 に答える