jQueryアニメーションの画像をプリロードする

Question

jQueryプリロードスレッドのヒープがあることは知っていますが、それらのほとんどを読んだことがありますが、私の問題の解決策を見つけることができないようです。

私はキューを使用してjQueryを介して構築された「ストップモーション」アニメーションをイメージの順次ネーミングに基づいています。このアニメーションは、それに必要なすべてのイメージがロードされるまで実行したくありません。異なる種類の製品に異なるアニメーションがあり、すべてのイメージが既にクライアントによって生成されているため、Spritingは現時点では選択肢ではありません。

瞬間マイ予圧コードは以下の通りである：

フレームシーケンス中の全画像の数（この段階で6または12）であり、次のように画像の命名規則がある

function preloadImages($img, $frames){ 
    var $imgsrc = $img.attr("src"); 
    var $getext = $imgsrc.split('.'); 
    var $ext = $getext[1]; 
    var $exploded = $getext[0].split('_'); 
    var $newsrc = ""; 
    for (var i=1; i <= $frames; i++){ 
     for (var j=0; j < $exploded.length-1; j++){ 
      $newsrc = $newsrc + $exploded[j] + "_"; 
     } 
     $newsrc = $newsrc + i + "." + $ext; 
     var image_preload = new Image(); 
     image_preload.src = $newsrc; 
    } 
} 

：

Brand_Product_Category_ProductID_SequenceNo.jpg。

私がしようとしているのは、これらの画像すべてがドキュメントの準備ができている下のスニペットを使ってプリロードされるまで、開始画像を保持しているdivを読み込まないのですが、必要なすべての画像がプリロードされる前にホルダーが表示され、アニメーションがスムーズに実行されません。

$(".holder").hide(); 
preloadImages($(".holder img"), 6); 
$(".holder").fadeIn("slow"); 

私はそれを実装する方法がわかりませんが、何らかのコールバックが必要だと思います。

Answer 1

問題はこれです：

あなたがImageオブジェクトのsrcフィールドに値を代入すると、それだけでことを行います。src属性を変更します。ブラウザは、src属性が指し示す場所から画像をロードする必要があります。

イメージの「ロード」イベントのハンドラを定義することができます。そのため、これらの行に沿って何かを使用する必要があります。

1つのアプローチは、ロードする必要のある画像のリストを定義することです。 Imageがロードされるたびに、配列にフラグを設定します。定期的に配列をチェックし、すべての画像がロードされたことを示すすべてのフラグがセットされたら、divをフェードインできます。