Images disappear from iBooks when played

1 post / 0 new

I have created an ePub3 file and the idea was to display few images in a small time interval. The file is working fine in Chrome browser but in iPad, the images disappear.
I have used the below JavaScript:

var ele, i=0;
var rooms = new Array("an1.jpg", "an2.jpg", "an3.jpg", "an4.jpg");
function start()
{
ele = document.getElementById('image15_1');
initiate();
}
function initiate()
{
ele.addEventListener("touchstart", locate);
// ele.addEventListener("click", locate);
}
function locate()
{
i=0;
moveImage();
}
function moveImage()
{
ele.src = rooms[i];
if(i<rooms.length)
{
setTimeout("moveImage()",100);
i += 1;
}
if (i == rooms.length)
{
ele.src = "an4.jpg";
initiate();
}
}

The corresponding HTML is:

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Animation</title>
<script type="text/javascript" src="anscript.js"></script>
</head>
<body onload="start();">
<h1>Sample Animation</h1>
<img id="image15_1" src="an1.jpg" style="position:absolute;margin:0; border:2px solid red;" alt="image 15"/>
</body>
</html>

Please help me to resolve the issue

Thanks

Secondary menu