加快img加载

Question

I have an array of images which pre-load and I have nine img tags on my page. I want to randomly replace and scramble the nine imgs with images from the array when i hover over a button. this all works but, it runs slowly, the imgs re-load the src. how do i

var arrayImg = new Array();

arrayImg[0] = new Image();

<img id="img0" >

then do:

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

there are 9 images.

I am running ie8 on a new fast pc but there is a very noticeable lag in the images changing. So, my question; how do I assign a cached image (arrayImg[random_ndx]) directly to an element () on the page?

Answer 1

Use .replaceChild .

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

Note that any element can't be in more than one place on page, so if you place element from arrayImg somewhere and then use it to replace another image you won't have two images, it will move from its previous location to new instead.

Answer 2

You can load the images and make them hidden. Then you need the hidden image to display. That's how I would simulate a cached array.