javascript - imの読み込みを高速化

Question

プリロードする画像の配列があり、ページに 9 つの img タグがあります。ボタンの上にカーソルを置いたときに、9 つの画像を配列の画像にランダムに置き換えてスクランブルしたいと考えています。これはすべて機能しますが、実行が遅く、imgs が src を再読み込みします。どうすればいいですか

var arrayImg = new Array();

arrayImg[0] = new Image();

<img id="img0" >

次に、次のようにします。

document.getElementbyID("img0").src = arrayImg[random_ndx].src;

9枚の画像があります。

新しい高速 PC で ie8 を実行していますが、画像の変化に非常に顕著な遅延があります。それで、私の質問です。キャッシュされた画像 (arrayImg[random_ndx]) をページの要素 () に直接割り当てるにはどうすればよいですか?

Answer 1

を使用し.replaceChildます。

local old = document.getElementbyID("img0")
old.parent.replaceChild(arrayImg[random_ndx], old)

どの要素もページ上の複数の場所に配置することはできないため、ある場所から要素を配置しarrayImg、それを使用して別の画像を置き換えると、2つの画像がなくなり、代わりに以前の場所から新しい場所に移動することに注意してください。

Answer 2

画像を読み込んで非表示にすることができます。次に、表示する隠し画像が必要です。それが、キャッシュされた配列をシミュレートする方法です。