■古いブラウザで透過PNGを表示させるJavascriptの比較検証

取り上げるのは下の3つ。便宜的に上からapng、alphafilter、ie6pngとする。

IT戦記 - 僕も半透明 png を使うためのライブラリ作った！

アルファ画像を扱うalphafilter.jsライブラリ-とあるWEBクリエイターのblog

ウノウラボ Unoh Labs: IE6でアルファチャンネルを含むPNGを表示する

apng

特長

• 外部ライブラリ不要
• 実行に遅延なし

萌えポイント

• コードの文体がいかにもプロっぽい
• グローバル領域を侵さない
• "if lte IE6とかもできるよ"って言ってるところ

好みがわかれるところ

• 対象PNGの直後にscriptロードするだけで使える / 何度もロードしなきゃいけないのが嫌

びみょうなところ

• imgにwidthとheightを指定しなきゃいけない（詳細不明）

簡単カスタマイズ

• elmScript.src.replaceのとこをいじって好きなファイル名（/blank.gifとか）に置換する

想定される用途

• 予めPNGファイルが用意されているとき
• ちょっとテストしたいとき

alphafilter

特長

• img要素のほかCSSのbackgroundにも適用できる

好みがわかれるところ

• classを使って処理を適用するかどうか決める / class指定しなきゃいけないのが面倒
• Event.observeが組み込まれてる

萌えポイント

• CSSのbackgroundにも使える
• 申告されたUAを信用してない

びみょうなところ

• prototype.jsが必要
• どうせEvent.observe使うなら無名関数にしてほしい
• window.onload時に実行されるので若干ラグる

簡単カスタマイズ

• 複雑なことはしてない（Event.observeとdocument.getElementsByClassNameだけ）のでprototype.jsレスにするのが容易
• document.getElementsByClassNameの第二引数を指定できるようにしたり、対象エレメントの配列をダイレクトに引数で受け取れるようにしたり

想定される用途

• 複数PNGに適用したいとき
• 透過PNGを背景に使いたいとき

ie6png

特長

• 代替GIFを指定できる

萌えポイント

特になし。ごめんなさい。

びみょうなところ

• prototype.js必須
• サンプルコードが微妙（後述）

簡単カスタマイズ

• AlphaChanneledPNG.initializeのEvent.observeを消して、実行コードを以下のようにして、HTMLの最後に書けばすっきりしていいとおもう

new AlphaChanneledPNG("imageId1","/blank.gif").show();
new AlphaChanneledPNG("imageId2","/blank.gif").show();
...

• Class.create、$()あたりを除去してprototype.jsレスに

想定される用途

• うーん……。

結論

• 手っ取り早く使うならapng、CSSのbackgroundに使うとか、PNGの数が多いならalphafilter
• jQueryと衝突するのでprototype.jsはカンベンしてください
• 欲を言えばIE7が出る前に開発してほしかったです

Permalink | 記事への反応(0) | 22:50

ツイートシェア