怖話では怖い話をサウンドノベル風に表示するのに色々端折ると下記のようなJavascriptを実行しています。
var text = ["こ", "わ", "い", "は", "な", "し"];
setInterval(function(){
line.innerHTML += text.shift()
}, 80);これが、PCやiPhone（3GSとかでも）ならばいいんですが、Androidのブラウザーだと僕の持っているGalaxy Nexusでもかなりカクカクします。
innerHTMLが遅いっていうのはよく見るんですが、全部つないで最後に表示というものではなく、実際に一文字、一文字増えていくサウンドノベルみたいな表示をするときに他の方法がイマイチわかりません。何か詳しい人だったら一発で速くなりそうな気もするんですがなんとも…。
text[0] && line.appendChild(document.createTextNode(text.shift()));
}, 80);
こんな感じでtext nodeを追加していく方法がスタンダードです(IEでも動きます)。
サンプル
http://www.gtk2k.net/textAnimation.html
あざーす！
しかし、createTextNodeすると外側のタグのwidthで文字が折り返さなくなっちゃうんですよね。文字列が入ってる1個のtextNodeと1文字のtextNodeいっぱいっていう状態とは違うんですかね。
innerHTMLの場合:
http://gyazo.com/b31c140bda286f319ae541e30a98bbb4.png?1336539433
http://gyazo.com/a965168adbea9b81aa79f8104f6550a9.png?1336539406
createTextNodeの場合:
http://gyazo.com/73655618e1f9c654a4ae714c0ffc5ecc.png?1336538949
http://gyazo.com/710c4260ff18dfd7278d7a2e39e6f886.png?1336539282
> gtk2k
なんかジオシのページが無いってエラーが出てるみたいです。
line.appendChildの後にline.normalize()を呼び出せば、一応改行するはずです(少なくともChromeではいけました)。
ただ、normalizeは実際に使ったことがないので、IEでちゃんと動くかわかりません。。
normalize()初めて知りました。IEでも試してみます。