私は7つのgifファイルを持つページを持っています。gifファイルを同期する方法はありますか?
すべてを同期する方法はありますか?同時に再生を開始しますか?
私はそれらをあらかじめロードすることを考えていましたが、読み込みに時間がかかると同期が開始されないことがあります。
私は7つのgifファイルを持つページを持っています。gifファイルを同期する方法はありますか?
すべてを同期する方法はありますか?同時に再生を開始しますか?
私はそれらをあらかじめロードすることを考えていましたが、読み込みに時間がかかると同期が開始されないことがあります。
@Archerが上記のように指摘したように、それをプリロードしてからsrcをリセットする方法があります。 jqueryのを使用して、あなたのような何かを行うことができます:
$(window).load(function() {
$('.preload').attr('src', function(i,a){
$(this).attr('src','').removeClass('preload').attr('src',a);
});
});
jsfiddleでそれを参照してください。
ページの先頭にすべてあらかじめロードしておき、ボディが読み込まれたときに実行してください。関数function gifs{}
を作成し、これを次のように実行します。<body onload="gifs()">
。
内容の種類に応じて、gifをpngシーケンス(スプライトシート)、またはjpgシーケンスに置き換えることを検討してください。
目的のアニメーションサイズのdivを作成し、スプライトシートをオーバーフローを隠した背景画像として設定します。
すべてのアニメーション(背景画像の位置)を各ティックで同時に更新するタイマーをjavascriptで作成すると、フレームレートを非常に正確に制御できます。
私は以前この手法を使っていましたが、スプライトシートが読み込み時間に影響を与えていない場合はうまく動作します。
gifファイルをjavascript(または任意のjavascriptライブラリ)で起動することはできません。あなたが行うことができる最高のものは、あらかじめロードしておき、一度ロードされると同時にsrcをすべてリセットすることです。それはそれらをすべて再開させるでしょう。 – Archer
私はこれがアーチャーの答えになると思いました。 「srcをリセットする」とはどういう意味ですか? – williamsongibson
2つの方法があります。ページ上にイメージを置いてそれらをすべて読み込ませるか、またはページ上のイメージを非表示にして、それらをメモリにロードして、純粋にスクリプト内にあるイメージオブジェクトを使用します。それらがすべてロードされたら、ページ内の各イメージのsrcを設定します。 srcをリセットすることによって、単にsrc属性を既に '$(" img ")に設定していたことを意味していました。(function(){$(this)[0] .src = $(this)[0]。 src;}); ' – Archer