0

私はphototshop（ローディングホイール）で作成したgifを持っていますが、それを使用する方法（cssで非表示にしてから表示し、後でjavascriptで上書きする）は、最初は遅すぎます。最初は一生懸命スキップします。そのため、呼び出す前に画像をキャッシュすることにしました。だからこれは私がそれをした方法です：

function preloadImages(array) {
    for (var i = 0; i < array.length; i++) {
        var img = new Image();
        img.src = array[i];
        preloadImages.list.push(img);
    } 
}

var imageURLs = [
    "loading.gif"
];

私が間違っていなければ、どちらがうまくいくはずです。しかし、念のために私も試しました：

loading = new Image(60,60)
loading.src = "images/loading.gif"

チュートリアルから抜粋しました。これを実装し（現在は最初のもの）、後で通常どおりにイメージを呼び出すと、実行速度が速くなり、キャッシュに表示されます。しかし、私は懐疑的であるため、HTMLで使用することのない画像を挿入し、キャッシュされるかどうかを確認しますが、呼び出さないことにしました。これが私の新しいJSです。

function preloadImages(array) {
    for (var i = 0; i < array.length; i++) {
        var img = new Image();
        img.src = array[i];
        preloadImages.list.push(img);
    } 
}

var imageURLs = [
    "loading.gif",
    "today.gif"
];

Nowに追加したことに注意してtoday.gifください。キャッシュの理解が正しければ、この画像は「生の」HTMLで正しく呼び出されなくても、キャッシュされるはずです。そうではありません。これは、読み込み中のgifがキャッシュされたのか、それとも私のブラウザが少しだけ協力することにしたのか、疑問に思います。何か案は？2番目のjavascriptスニペットを使用したフレッシュクリア後のリロード時のキャッシュは次のようになります。

キャッシュ

したがって、ここでの質問は次のとおりです。キャッシュが機能していないと言っていても、機能していますか？私は物事を想像していますか？私はこれを正しく行っていますか/ローカルキャッシュの理解は正しいですか？そうでない場合、誰かが私にどこが間違っているのか説明できますか？乾杯。

4

2 に答える 2

1

定義する関数は、引数として配列を想定しています。

試してみてくださいpreloadImages(["images/loading.gif", "images/today.gif"]);。現在、閉じ引用符がなく、配列を渡していないが、引数として2つの別々の文字列を渡していない。

于 2013-03-14T19:58:08.780 に答える
0

あなたはそれを間違ってやっています-

forループ内に画像オブジェクトを作成するときは、クロージャ関数内で作成してください。そうしないと、前のオブジェクトが最後のオブジェクトによって上書きされます。その性質は非同期です-

(function(i){
var img = new Image();
img.src= array[i];}(i))

また、リストを作成してオブジェクトをリストにプッシュすることはまったく役に立ちません。

于 2013-03-14T19:58:01.793 に答える