2011-01-29 25 views
0

さまざまなサイズの画像が4つあります。私はそれらを特定の順序でロードしたい。ロードハンドラを使用すると、ロードされると表示されますが、必要ではありません。しかし、それらを順番に.fadeIn()に設定すると、必ずしもロードされません。複数の画像をロードした順にロードする

アイデア?ここでは、私がこれまで持っているものです:

$('.z2').load(function(){ 
    $(this).fadeIn(600); 
    $('.z4').delay(300).fadeIn(1900, function(){ 
     $('.z1').fadeIn(3250);         
         }); 
         }); 

Z4が大きいので、z2はZ4より大きく、Z4がロードされると、その後、私はフェードインにZ1を設定するので、私は同時にZ2とZ4フェードインしましょう。

私はいくつかのグローバル変数を設定しなければならないかもしれないと思うので、変数が満たされるとピクチャがフェードインし、変数はロード関数によって設定されます。他のアイデアは素晴らしいですが、私はあまり時間を無駄にしません。

答えて

0

fadeinを呼び出すload関数の代わりに、読み込まれたイメージの数を追跡します。 varを0に設定します。これらのイメージの1つが読み込まれるたびに、varをインクリメントします。 varが4に達すると、THENはフェードインをスケジュールします。

遅延の再生は問題ありませんが、ネットワークの不具合により、「大きな」画像の後に「小さな」画像が長く読み込まれる可能性があります。

+0

私は本当にそれらがロードされているときに表示させたいが、順番に表示したい。あなたが提案することは、ロード時間が最長であることを意味し、画像が表示される前にすべての画像を待つことを意味します。 – bozdoz

+0

ああ。本当。しかしどちらの方法でも、「後の」画像が「前の画像」の前に表示されないようにする必要があります。つまり、読み込まれた画像のクライアント側のリストを保持する必要があります。画像#2が#1より前に終了したら、#1が完了するまでそれを表示しないなど –

関連する問題