[Web]gifアニメにonload属性を設定するときの注意点

4月 05 2011

こんにちは、もざみみです(*･x･)
今日はJavascriptとIEのアレな話を書こうと思います。
これでハマってしまったので、同じようなところでハマる人のために。

まず、こんなHTMLコード(onload_test.html)を書きます。
(読みづらくてごめんなさい)

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html xmlns=“http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8” />
<meta http-equiv=“Content-Script-Type” content=“text/javascript” />
<script type=“text/javascript” src=“script.js”></script>
<title>画像のonloadテスト</title>
</head>
<body>
<img src=“anime.gif” alt=“アニメーション” onload=“Hoge();” />
</body>
</html>

このソースのミソは以下の点です。

DOCTYPE宣言のシステム識別子(DTDのURL)がないので、IE8(おそらくIE9βも)にコレを食わせると、Quirksモード(IE5と同等にレンダリングするモード)に。
gifアニメーション画像を表示。
gifアニメーション画像のonload属性に、Hoge()という関数を実行するように設定。Hoge()はscript.jsの中に書いてあります。

では、次にロードするJavascriptファイル(script.js)を見てみましょう。

/* gifアニメのonloadテスト */
function Hoge()
{
alert(”(*･x･)ｳｻ!”);
}

Hoge()自身は、単純明快、単にアラートを表示させるだけです。

さて、onload_test.htmlをFirefoxに食わせてみましょう。

アラートが1回表示され、OKボタンで消した後は二度とアラートが表示されることはありません。なぜなら、onload属性は、画像がロードされたときに実行されるメソッドを指定するモノだからです。

では、Google Chromeでも試してみましょう。

よしよし期待通り。ちなみに、Opera10でも同じような挙動でうまくいきました。

次はIE8、行ってみましょうか。

……………………アラート大爆発。
IE9βでもキッチリ大爆発してくれました。

実際に実行してもらうとわかると思いますが、どうやらgifアニメの再生が1周するたびに、Hoge()が呼ばれているようなのです。

つまり、
どうやらIE8とIE9βは、Quirksモード(IE5と同じ挙動を実現するモード)で動かすと、gifアニメの再生が終わるたびにonloadイベントが発生するみたいなのです。
イマドキ、Quirksモードでレンダリングさせることは滅多にないとは思いますが、これを知らなかったら見事にハマること請け合いです。

もちろん、QuirksモードじゃなくてちゃんとDOCTYPE宣言書いて、ちゃんとしたモード(Standardモード)で動かすなら、FirefoxやChromeのような挙動になってくれるから大丈夫です。

ただ、問題なのは、Windows7のガジェットのバグ(?)なんですね…
Windows7のガジェットは、実はIEでレンダリングしたHTML+CSS+Javascriptを、ガジェットの枠内に表示させているだけなのです。
つまり、Webアプリを作る感覚でガジェット作りができるということです。

ただ、これがクセモノで、ちゃんとXHTMLのDOCTYPE宣言を書いているにもかかわらず、gifアニメが1周するたびに律儀にonloadをお発行してくださるのです。
このときに書いたバグは、まさにコレが原因でした。

やっぱりIEは一筋縄ではいかない、ワガママな子です..
だがそれが.. よくない(*;x;)!

BLOG.QuelLENcode

[Web]gifアニメにonload属性を設定するときの注意点