プログラマ気分

メモや自分が思ったことを書く

<< 【AS3.0】Flash IDNA | main | metaタグを追加してFacebookに対応する際に確認やキャッシュをクリアするなら URL リンター >>

スポンサーサイト

2014.08.06 Wednesday

一定期間更新がないため広告を表示しています

-|-|-|by スポンサードリンク

DD_belatedPNG を改造して、jQuery.belatedPNG を作ってみた

2010.08.20 Friday

最近有名になっている DD_belatedPNG を jQuery 用のプラグインとして移植&改造してみました。

【本家サイト】http://dillerdesign.com/experiment/DD_belatedPNG/

IE とアルファチャンネル付き PNG で起きる不具合

IE は、どのバージョン(2010/08/20 現在 IE6/7/8)においても PNG の表示に不具合があります。
最も有名なのが、IE6 のアルファチャンネルがグレーになる現象で、他に IE7/8 だとアルファチャンネル+半透明(filter:alpha)で一部が透過されないなどがあります(フェードイン・アウトを使う場合に弊害となります)。

PNGサンプル

DD_belatedPNG とは?

元々は IE6 用の pngFix です。PNG を VML で表示する事で不具合に対応します。これは IE7/8 の不具合にも有効です。ただし使用の際には以下の点を注意してください。

今回移植するに当たって、上の問題を改善してみました。
→サンプルページ

使用方法

ダウンロード:こちらから最新バージョンをダウンロードしてください。
移植で使用した DD_belatedPNG は 0.0.8a です。
本家同様 MIT ライセンスです。

jQuery 1.5 以下で使用してください。1.6 以上は jQuery 自体のバグによってうまく機能しません。後日アップデートを行い公開します。
修正しました。上のリンクよりダウンロードが可能です。(11/05/24)

1.6 以上で正常動作しなかった理由をこちらに書きました。

JavaScript12:26comments(4)trackbacks(0)by ニノミヤ カズノリ

スポンサーサイト

2014.08.06 Wednesday

-|12:26-|-|by スポンサードリンク

コメント
めちゃくちゃ助かりました。
素敵なプロダクトを有難うございます。
jquery.imagesloaded.min.jsなどを使って画像のロードを待ってからfixPng()した方が良いって事はないですか?
スタンドアロンではなくietesterで検証しているのが悪いのかもしれないですが、たまに画像領域のなかで拡大されたような表示になったり、そもそも適用されていなかったりするのですが。。。
> ウィーンさん

返答が遅くなってすみません。
そうですねぇ…。読み込みや処理のタイミングで画像サイズが正しく取得できていないのかも知れません。
ウィーンさんと全く同じ症状で悩んでいるのですが、此方のプラグインを利用させて頂き、以下の設定にて同じ現象が起きています。

【IEtester】
IE8にて背景画像pngが拡大される

【Win7 IE9(開発者モード)】
ブラウザモード:IE8
ドキュメントモード:IE7
最初に表示したとき画像が拡大され、以降リロードしたときは問題ありません。

IE8ではメタでIE=EmulateIE7を設定し、さらにスクリプトをbody下部直前などに記述したり、色々と試してみましたが全て解決には至りませんでした。
過去のプラグインなども試したかったのですが、ソースが見つからなかったため、0.0.8aの方使用させて頂いております。


コメントする









トラックバック
calendar
     12
3456789
10111213141516
17181920212223
24252627282930
<< September 2017 >>
sponsored links
selected entries
categories
archives
recent comment
recent trackback
links
profile
search this site.

others
mobile
qrcode