3 回ループするアニメーション GIF があります。Firefox と Chrome (他はチェックしていません) で、GIF を 1 回表示でき、その後ページをリロードすると、キャッシュされた GIF がまったくアニメーション化されないことに気付きました。
これに対する解決策はありますか?これが発生しないように変更できるアニメーション GIF について何かありますか?
それは非常に醜い解決策ですが、画像をインラインで呼び出す場合はこれを使用できますが、きれいではありませんが機能します!
<img src="filename.gif?rand=<?=rand(1,1000);?>" alt="" />
それが役立つことを願っています
Jade O'Connor のソリューションは機能しますが、前述のように醜いソリューションです。ページにアクセスするたびに、サーバーから画像がダウンロードされるためです。これにより、大きな画像の帯域幅の問題が発生します。これにより、ページの読み込み時間も長くなるため、接続が遅い場合には問題になります。
より良い解決策はありますか?
私はこのようなことを考え出した:
アニメーション gif をループ「フォーエバー」モードで再生成しました。私の gif には 20 個のフレームがあり、それぞれが 150 ミリ秒表示されています。ループの 1 ステップが 3 秒間続くようにします。アニメーションの最後のフレームの jpeg バージョンも作成しました。
ページが読み込まれると、window.setTimeout() メソッドを使用して、3 秒後に gif を jpeg に置き換えました。なぜなら、ループの最初のステップが終了したときに、最終フレームを静止させたかったからです。しかし、タイミングの問題がありました。最後のフレームが表示されると、gif を jpeg に置き換える前にアニメーションが再開されます。アニメーションが終了または再開されたかどうかを検出する方法はありますか?
この場合に選択した解決策は、グラフィック名の末尾に GET 変数を追加して、ページが更新されたときにグラフィックがキャッシュから再ロードされないようにすることでした。
var myImg = new Image();
myImg.src = "image.gif?rnd=" + Math.random();
問題の GIF を教えてください。使用しているすべての GIF で発生しますか? すべて同じアプリケーションで作成されていますか?
とにかく、キャッシュしないで出来上がり、解決しました。しかし、別のアプリケーションを使用して GIF を作成し、正しく動作するかどうかを確認する必要があると思います。
Firefox では、またはを使用して強制的にフル リロード (キャッシュをリロード) できCtrl+Shift+RますCtrl+F5。
Chromeでは、Ctrl+F5またはShift+F5です。