1

img.src置換と<canvas>タグを使用した簡単なアニメーションを提示しています。現時点では、FireFox (FF 3.5.3、Mac OS X 10.5.5) でのみ動作することが期待されているため、ブラウザー間の互換性は (まだ) 問題ではありません。

ページが最初に読み込まれるか、新しいウィンドウまたはタブに読み込まれると、すべてが期待どおりに機能しているように見え、単純なリロードでのキャッシュの動作は問題ではないようです。ただし、shift-reload で強制的にリロードしようとすると、問題が発生します。画像はプリロードされていますが、アニメーション用にプリロードされた画像は、サーバーから新しい img.src をロードしようとするブラウザで利用できないようです。

ここでブラウザのバグを見ているのでしょうか、それとも私のコードに見えない何かバグがありますか? これは js クラスを実装する最初のショットなので、理解できないことがたくさんあるかもしれません。

ここに集まった賢者からの洞察は大歓迎です。私が話していることは、次の場所で見ることができます。

http://neolography.com/staging/mrfm/spin-sim.html

ありがとう、

ジョン

4

3 に答える 3

2

シフト リロードすると、キャッシュからではなく、ブラウザにリロードするように指示されます。

したがって、サーバーから画像を取得していることは驚くべきことではありません。

次のコードを使用して、JavaScript で画像を事前に読み込むことができます。

img = new Image();
img.src = "your/image/path";

使用する前に画像をロードしたい場合は、役立つかもしれません。

于 2009-10-16T21:03:09.283 に答える
0

試したekhaledに感謝します。私はこれがブラウザのバグであることに満足しています： Mozillaのバグ＃504184

http://neolography.com/staging/shift-reload/shift-reload-testcase.htmlに、簡略化した例がありますが、これは残しておきます。修正されるように、mozillaバグトラッカーでこのバグに投票することをお勧めします。

j

于 2009-10-17T21:13:16.230 に答える
0

私はあなたのコードを見て、あなたは document.ready() に次のものを持っています

   function countLoadedImages() {
        loadedImgs++;
        if (loadedImgs == images.length){
            $("#loading-image").hide();
            $("#controls").fadeIn(100);

        }
    }


    animation = new simAnim("snap", "stripchart", 800, deriveFrameData(spindata));

animation = new simAnim 行は、100 個の画像すべてがロードされているかどうかに関係なく実行されます...

これを修正する 1 つの可能性は、その行を次のように countLoadedImages 関数内に移動することです。

    function countLoadedImages() {
        loadedImgs++;
        if (loadedImgs == images.length){
            $("#loading-image").hide();
            $("#controls").fadeIn(100);
            animation = new simAnim("snap", "stripchart", 800, deriveFrameData(spindata));

        }
    }

このようにして、すべての画像が読み込まれると関数が実行されます

于 2009-10-17T02:06:44.227 に答える