jQueryプラグインのCSS背景画像をプレビュー

Question

私は針ゲージを使用するjQueryプラグインを使用しています。プラグインを含むページを最初にロードすると、プラグインは背景イメージがロードされる前にアニメーションを開始します。スピードメーターが範囲外になると、2番目の画像（「破損ゲージ」）が読み込まれますが、画像が読み込まれるまでにもう一度遅延があります。

http://jacob-king.com/public/notSoPublic/jquery.speedometer-1.0.3/example.html

：「壊れた」画像プリロードの問題を解決し、私は this solutionを使用してみました

http://jacob-king.com/demo/speedometer

、（これを見るために、ゼロより低いまたはより高い100の値を入力）

(function(){ 

    // counter 
    var i = 0; 

    // create object 
    imageObj = new Image(); 

    // set image list 
    images = new Array(); 
    images[0]=_speedometerDirectory+"/background.jpg"; 
    images[1]=_speedometerDirectory+"/background-broken.jpg"; 

    // start preloading 
    for(i=0; i<=1; i++) 
    { 
      imageObj.src=images[i]; 
    } 

})(); 

しかし、アニメーションを開始する前に両方の背景イメージがロードされるのをプラグインが待つようにするにはどうすればよいですか？

---

ソリューション

画像は$の.Fn呼び出し不適切なように見えたの外に置く、jQueryプラグインの一部としてロードされたので。速度計機能が呼び出されない限り、イメージはロードされません。

私はcrimson_penguinのソリューションを少し変更したバージョンと一緒に行くことになった：

var img0 = new Image(); 
img0.src = _speedometerDirectory+"/background.jpg"; 
var img1 = new Image(); 
img1.src = _speedometerDirectory+"/background-broken.jpg"; 

$(img0).load(function() { 
    $(img1).load(function() { 
     // Everything's ready. Now we begin. 
    }); 
}); 

これはおそらく、少し場しのぎに見えます。より洗練された構文を自由に提案してください（これは遅く、疲れています。結果はhereと表示され、私は1.0.4アップデートの一部としてそれを含めます。みんな、ありがとう。

---

編集：私はあまりにも早く話しました。キャッシュにロードされたイメージがないと、プラグインでは、Google Chromeの最初のページのロードに起動に失敗した...イメージがロードされた後に

Answer 1

1つのオブジェクトだけを使用して両方の画像を読み込みます。それがうまくいくかどうかはわかりません。あなたが開始する、

for(i=0; i<=1; i++) 
{ 
    var img = new Image(); 
    img.src = images[i]; 
    images[i] = img; 
    $(images[i]).load(function() { ... }); 
} 

その後、あなたには、いくつかのカウント変数をデクリメント（または増分）することがあり、そのロード機能を設定することができ、それがゼロ（または到達するはずの数）に達したとき：私の代わりにこのような何かをするだろう。カウント変数はもちろんforループのためにローカルでなければなりません。私はそれがグローバルでなければならないか、それがその関数にとってローカルであるかどうかはわかりません。

Answer 2

window.onload = function() { 
    // start my plugin 
}; 

Window.onloadにのみトリガする必要があります。安全のために、私はあなたの画像を頭の中で予備機能を実行するだろう。