JavaScriptで連番画像をコマアニメーション

JavaScriptをつかってパラパラ漫画のようなコマアニメーションを実装しようとした際、よく使われる3つの方法を比較してみました。

imgタグのソースを切り替える

imageタグのsrcを差し替えてパラパラ漫画を実装してます。
ブラウザの仕様、サーバ側の仕様によるとは思うのですが、srcを切り替えるたびにリクエストがはしるというストリーミングのような挙動になってしまったことがあったので、最近はこの実装方法は敬遠しています。

DEMO

HTML

<img id="img" src="" />

JavaScript

(function(win, doc) {

    "use strict";
    
    var img = doc.getElementById("img"),
        srcList = [
            "http://jsrun.it/assets/m/q/5/0/mq50U.png",
            "http://jsrun.it/assets/l/0/A/A/l0AAT.png"
        ],
        length = srcList.length,
        index = 0;
    
    setInterval(function() {
        img.setAttribute("src", srcList[index]);
        index = ++index % length;
    }, 200);
    
})(this, document);

CSS

* {
    margin: 0; padding: 0;
}

body {
    background: #333;
}

#img {
    position: absolute;
    top: 50%; left: 50%;
    margin: -77px;
    width: 154px; height: 154px;
}

divタグのbackground-imageを切り替える

divじゃなくてもいいんですが適当なタグのbackground-imageを差し替えてパラパラ漫画を実装してます。
特にメリットはないかもしれませんが、切り替えるたびにリクエストがはしったことはいまのところありません。

DEMO

HTML

<div id="img"></div>

JavaScript

(function(win, doc) {

    "use strict";
    
    var img = doc.getElementById("img"),
        classList = [
            "",
            "open"
        ],
        length = classList.length,
        index = 0;
    
    setInterval(function() {
        img.className = classList[index];
        index = ++index % length;
    }, 200);
    
})(this, document);

CSS

* {
    margin: 0; padding: 0;
}

body {
    background: #333;
}

#img {
    position: absolute;
    top: 50%; left: 50%;
    margin: -77px;
    width: 154px; height: 154px;
    background-image: url(http://jsrun.it/assets/m/q/5/0/mq50U.png);
}

#img.open {
    background-image: url(http://jsrun.it/assets/l/0/A/A/l0AAT.png);
}

divタグのbackground-positionを切り替える

スプライト画像をつくって、background-imageに設定。background-positionを変更してパラパラ漫画を実装してます。
何コマあってもリクエストは1回で済みますし、普段はこの手法を使ってます。

DEMO

HTML

<div id="img"></div>

JavaScript

(function(win, doc) {

    "use strict";
    
    var img = doc.getElementById("img"),
        classList = [
            "",
            "open"
        ],
        length = classList.length,
        index = 0;
    
    setInterval(function() {
        img.className = classList[index];
        index = ++index % length;
    }, 200);
    
})(this, document);

CSS

* {
    margin: 0; padding: 0;
}

body {
    background: #333;
}

#img {
    position: absolute;
    top: 50%; left: 50%;
    margin: -77px;
    width: 154px; height: 154px;
    background-image: url(http://jsrun.it/assets/x/s/N/h/xsNhK.png);
}

.open {
    background-position: 0 154px;
}