animated gif image swap in IE

[mikemardon]

Hi There

I am preloading animated gifs in javascript which replace static images on mouse over. This works fine in FF but in IE the animated gif starts playing as soon as it is preloaded in script, so when you hover the static image you either get half of the animation or just the last frame if it has already finished.

Can anyone help me out with this?
Thanks


//these are global arrays
var imagesToCache = new Array();
var cachedImages = new Array();

//i am adding the animated gifs to the array
imagesToCache.push("styles/images/1.gif");
imagesToCache.push("styles/images/2.gif");
imagesToCache.push("styles/images/3.gif");
//then the static images
imagesToCache.push("styles/images/1.jpg");
imagesToCache.push("styles/images/2.jpg");
imagesToCache.push("styles/images/3.jpg");

//then calling a preload function :
preload(imagesToCache);

function preload(imagesToCache) {

var imageObj = new Image();

for(x in imagesToCache)
{
cachedImages[x] = new Image();
cachedImages[x].src=imagesToCache[x];
}
}

//This is a function which swaps the static images for the animated ones :

function showproductanim(obj)
{
var imageholder = obj;
var imagePath = obj.src.substring(0,obj.src.lastIndexOf("/")+1);
var currImg = obj.src.substr(obj.src.lastIndexOf("/")+1, obj.src.length - imagePath.length);
var newImg = new Image();
var newImgURL = imagePath + currImg.replace(".jpg",".gif");

for(x in cachedImages)
{
if(cachedImages[x].src == newImgURL)
{
imageholder.src= cachedImages[x].src;
}
}

}

//imageholder is an IMG tag which contains the images.