Play and stop image sequences with pure Javascript



Did you ever try to play image sequences, maybe frame by frame animated cartoon or any sequences with Javascript?

Here we share you simple Javascript code to play it.

Basically, it works by manipulating image source for <img> element by time interval, for example 500 millisecond, repeatedly and the script loops and increment the frame number so the browser can show our images frame by frame based on interval we have set.

In this example, animation may be played with delay. But if graphic files is on local machine, animations will be started immediately.

Here is the source code:

Recently I’ve published similar post about playing image sequences with JavaScript. But this time I’m using HTML5 Canvas to render the images. Read that post here: http://zofiakreasi.com/playing-looped-image-sequences-with-javascript/



Published by

Habibie

Habibie is an Indonesian freelance frontend-backend web developer and cross platform mobile app programmer. He's also good at graphics design, video editing, visual effects and animation.