How can I insert images at a given time?

I want to add a feature on my site that if someone was to click on a button, then 2.301 seconds after he pressed it, an image appears, and then 4.039 seconds after he pressed it, an images appears and the last image disappears, and then 7.409 seconds after he pressed an image appears and the last image disappears and etc. How can I do this?

The setTimeout method allows you to set a timer which will execute a function once the timer expires.

And to change the image you only need to change the .src property of a given img element. Or you could create several img elements and change their visibility in the callback of the setTimeout method.


Timeout might be late 4-8 milliseconds (depending on the browser) and it becomes 1 second late if the tab is inactive. Is there a completely accurate way, other than videos and GIFs?

I say “other than videos and GIFs” because I want the images to be interactive and have alternative text.

Jazak Allah khayran,

If you are interested in this level of accuracy then the answer is no.

You could use Window.performance and requestAnimationFrame to get better accuracy, but it will not be even close to your expectations. In most popular browsers a continuous event loop is run at 60Hz refresh rate. So with the redrawing itself you can already get even 16ms offset.

Jazak Allah khayran but if there’s no other way then how does the Word-by-Word feature (when you click “Play”) on this site ( work?

This site uses setTimeout or requestAnimationFrame. I think that you need to think a bit about the duration of ms.

If this timeout has to control the animation then what’s the problem? Do you seriously think that you or anyone else will be able to spot 8 ms offset? :smiley: Even with 120Hz refresh rate you can get 8 ms offset from the animation frame itself.

Jazak Allah khayran. Suppose I want to create a flipbook plugin. The flipbook shows 2 pages at once, the user uses the mouse to turn the page by dragging the edge of the page to right/left and the page will turn according to the mouse’s speed, maximum is when the mouse reaches the middle of the 2 pages, and at this point an animation will be shown to show that the page completes to turn to the end even if the user did otherwise with the mouse (by moving it to the opposite direction). And as the page turns the content of the page get “compressed,” sort of like what happens here:

Do you have any idea about what commands I should use? And by the way, this will be (by the permission of Allah) like “the core” or “the main part” of my site, so if you helped then you have, in shaa Allah, contributed to a very important project.

Note: For your information, the book is 604 pages.
Also note: The images of the pages will (by the permission of Allah) be SVG or any other vector files, if that affects compression

Jazak Allah khayran,

By no means, I am a front-end specialist. But I think that you should be able to find many ready to use solutions. I would suggest googling phrases like SVG flipbook and HTML5 flipbook.

I would love to help more, but unfortunately, this is not my field of expertise.

Jazak Allah khayran,

1 Like