My cross-platform mobile app built with jQuery Mobile is a small quiz application. After each correct or wrong answer, I display a 3-second GIF. Currently, I have set up the code to show the GIF for 3 seconds before moving on to the next page:
else if ($.mobile.activePage[0].id == "correctGIF") {
setTimeout(function() {
$.mobile.navigate(nextpage);
}, 3000);
}
However, I've noticed that when the GIF is displayed again, it doesn't always start from the beginning. Sometimes it starts from the middle or near the end. Is there a way to ensure that it always starts from the beginning?
The HTML code for displaying the GIF is as follows:
<div id="correctGIF" data-role="page" data-add-back-btn="false">
<img src="images/Correct1.gif">
</div>