0

私は10個の画像を持っています。各画像は特別なフォントで0〜9の数字を表しています（したがって、画像）

パフォーマンスと遅延を改善するために、次のような画像をプリロードしました。

 function createDigit() {
     for (var i = 0; i < 10; i++) {
         var obj = new Image;
         obj.src = 'digit' + i + '.png';
         digitHash[i] = obj;
     }
  }

したがって、数字のハッシュでは、0 から 9 までのインデックスが付けられたキーがあり、対応する各値は画像オブジェクト参照であり、src は画像ファイルの場所にマップされます。

今私のhtmlには、divタグがあります

<div id='digits'></div>

「2000」を表示したいので、次のjqueryがあります

$('#digits').append(dightHash[2], dightHash[0], dightHash[0], dightHash[0]);

'20' しか表示されません。Firefox コンソールでデバッグと印刷を行った後、同じ画像参照を複数回追加しているときに発生することに気付きました。つまり、「2000」の 2 番目のゼロと 3 番目のゼロは追加されないため、「20」しかありません。

次を追加すると：

$('#digits').append(dightHash[2], dightHash[3], dightHash[4], dightHash[5]);

「2345」の完全な表示が得られます。これは、追加に重複する画像参照がないためです

この問題を解決するにはどうすればよいですか? 私が使用できるjqueryのappendメソッド以外に何かありますか??

ありがとう

4

2 に答える 2

1

すでに説明したように.append()、オブジェクトを任意の場所から指定された場所に移動します。オブジェクトのコピーは作成されません。

そのため、このような目的のオブジェクトを作成することをお勧めします。そうすれば、数字が重複することを心配する必要はありません。それぞれがこの方法で独自の画像オブジェクトを取得するからです。

// create an individual image
function makeDigit(n) {
    var img = new Image();
    img.src = 'digit' + n + '.png';
    return(img);
}
// Force all images into browser memory cache for fast loading:
function cacheDigits() {
     for (var i = 0; i < 10; i++) {
         digitHash.push(makeDigit(i));
     }
}


$('#digits').append(makeDigit(2), makeDigit(0), makeDigit(0), makeDigit(0));
于 2012-04-10T04:39:42.020 に答える
0

はい、追加するオブジェクトのコピーを自動的に作成するのではなく、実際に DOM 内を移動します。

.clone()参照を移動する代わりに、追加が画像のコピーを取得して追加するように呼び出すことができます

$('#digits').append(dightHash[2], $(dightHash[0]).clone(), $(dightHash[0]).clone(), $(dightHash[0]).clone());
于 2012-04-10T04:21:12.937 に答える