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/

Habibie
Habibie is an Indonesian Java, C#, PHP, MySQL, HTML5, CSS3 & JavaScript programmer. He is also a good graphic designer, video editor, animator and 3D modeler.

Related Post

Play and stop image sequences with pure Javascript