How to avoid image flicker in IE using timer - image

Question

I have the following code which causes smooth playback in Chrome. but in IE10 it causes a flicker. Are there workarounds at all?
Thanks
HTML
<a href="#" title="Play Motion Clip from Beginning">
<img alt="Play Motion" src="../Images/play_green_controls.png" style="border-style: none; width: 32px; height: 32px; background-color: #000000; cursor: pointer;"
id="btnPlay" />
</a>
<div id="divImage" >
hello andy
</div>
Javascript
<script type="text/javascript">
var cache = [];
var cacheImage = document.createElement('img');
var interval = 100;
var _total = 0;
$("#btnPlay").click(function () {
$.ajax({
type: "POST",
url: "Default3.aspx/GetClips",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
cache = [];
_total = 0;
$.each(msg.d, function () {
var cacheImage = document.createElement('img');
cacheImage.src = this['Text'];
cache[_total] = cacheImage;
_total++;
}
);
setInterval('swapImages()', interval);
},
error: function (msg) {
alert(msg.d);
}
});
});
var div = document.getElementById('divImage');
var _index = 0;
function swapImages() {
if (_index < _total) {
if (_index > 0) {
div.removeChild(cache[_index - 1]);
}
div.appendChild(cache[_index]);
}
else {
interval = 0;
}
_index++;
if (_index == _total)
{
div.removeChild(cache[_index - 1]);
_index = 0;
div.appendChild(cache[_index]);
}
}
Code Behind:
[WebMethod]
public static ArrayList GetClips()
{
ArrayList _arr = new ArrayList();
int _max = 250; //seems to be safe
string[] _files = Directory.GetFiles(#"C:\Cloud\Catalogues\000EC902F17F\2\2013\10\6\10\f1fe61da-4684-48ed-a503-4a5586ece9c8","*.jpg"); //731
for (int _index = 0; _index < _files.Length; _index++)
{
string _file = _files[_index];
string[] _bits = _file.Split('\\');
string _url = "Portal/Catalogues/000EC902F17F/2/2013/10/6/10/f1fe61da-4684-48ed-a503-4a5586ece9c8/" + _bits[10];
ListItem _item = new ListItem();
_item.Text = _url;
_arr.Add(_item);
if (_index == _max - 1)
{
break;
}
}
return _arr;
}