2

I have a small cross-platform mobile app using jQuery Mobile. It is a small quiz app, and after each correct or wrong answer I'm showing a 3 second GIF. What I have done is, when the page containing the GIF is active, I let it show for 3 seconds and then go to the next page. I have the following lines of code for it:

else if ($.mobile.activePage[0].id == "correctGIF") {
    setTimeout(function() {
        $.mobile.navigate(nextpage);
    }, 3000);
}

But the point is, the next time the GIF is displayed it doesn't start from the beginning. Sometimes it starts from beginning, sometime from the middle and sometimes near the end. Is there any way how I can make it to always start from beginning?

I have the GIF in html as this:

<div id="correctGIF" data-role="page" data-add-back-btn="false">
    <img src="images/Correct1.gif">
</div>
vico
  • 2,152
  • 2
  • 17
  • 38

1 Answers1

2

You load the img initially, and even though it's hidden, it's still playing. You need to reload the img into the DOM prior to showing it.

$('#correctGIF img').remove(); // remove it
$('#correctGIF').append('<img src="images/Correct1.gif">'); // reload it
StaticVoid
  • 1,539
  • 10
  • 11