7 つの gif ファイルを含むページがあります。
それらをすべて同期して、同時に再生を開始する方法はありますか?
それらを事前にロードすることを考えていましたが、ロードに時間がかかると同期が開始されない場合があります。
7 つの gif ファイルを含むページがあります。
それらをすべて同期して、同時に再生を開始する方法はありますか?
それらを事前にロードすることを考えていましたが、ロードに時間がかかると同期が開始されない場合があります。
上で@Archerが指摘したように、それを行う1つの方法は、それらをプリロードしてからsrcをリセットすることです。jquery を使用すると、次のようなことができます。
$(window).load(function() {
$('.preload').attr('src', function(i,a){
$(this).attr('src','').removeClass('preload').attr('src',a);
});
});
jsfiddleで参照してください。
コンテンツの種類に応じて、GIF を png シーケンス (スプライト シート) または jpg シーケンスに置き換えることを検討してください。
目的のアニメーション サイズの div を作成し、スプライト シートを背景画像として設定し、オーバーフローを非表示にします。
フレームレートを非常に正確に制御できるように、各ティックで同時にすべてのアニメーション (背景画像の位置) を更新するタイマーを JavaScript で作成します。
以前にこの手法を使用したことがありますが、スプライト シートがロード時間にあまり影響を与えていない場合はうまく機能します。
ページの先頭ですべてをプリロードして、本文がロードされたときに実行してみてください。function gifs{}
おそらく関数を作成し、次のように実行します<body onload="gifs()">
。