2010年7月9日金曜日

[JavaScript]FancyboxがIEだと遅い(AlphaImageLoaderがダメ)

前の記事でPicasaの写真を一覧表示するプラグインを使ってWordpressに表示したときに、クライアントではFancyboxを使おうと実装してみた。

image

ただ、大量の写真をIEで表示させると異様に遅い。読み込んでから引っかかっている感じ。調べてみるとどうやらcssでAlphaImageLoaderを指定しているのが原因みたい。

AlphaImageLoaderはIE6でもpngを表示させるためのIE限定ハック。

しょうがないのでAlphaImageLoaderは全てコメントアウトして、JavaScriptでIE6でもPNGを表示できるライブラリ「DD_belatedPNG」を使うことにした。

ライセンスはMIT License。

add_action('wp_head', 'show_ie6_png');//IE6のPNG対応
function show_ie6_png() {
	$base_url = get_bloginfo('url') . '/wp-content/plugins/wp-gallery/fancybox';
	echo '<!--[if IE 6]>';
	echo '<script type="text/javascript" src="' . $base_url . '/DD_belatedPNG.js"></script>';
	echo '<script type="text/javascript">';
	echo 'DD_belatedPNG.fix(".fancy-bg, .fancy-ico, #fancybox-close, #fancybox-loading div");';
	echo '</script>';
	echo '<![endif]-->';
}

さらに同じ画面にflashがあるとflashが前面に出てきてしまう問題は、

wmode="transparent"

を設定するか、flashに日本語入力する場合はfancyboxの開始、終了イベントに次のような感じでバインドする。参考サイト

jQuery(function(){
	jQuery(".photo-list a[rel=photo]").fancybox({
		'hideOnContentClick': false,
		'onStart' : function() {
			jQuery('embed, object, select').css('visibility', 'hidden');
		},
		'onClosed' : function() {
			jQuery('embed, object, select').css('visibility', 'visible');
		}
	});
})

 

<関連記事>

【PHP】WordpressでPicasaの写真を表示(非公開のも)
【JavaScript】IE6だと画像が表示されたり、されなかったり
コメントを投稿
Related Posts Plugin for WordPress, Blogger...

Blog Archives