[JavaScript]FancyboxがIEだと遅い（AlphaImageLoaderがダメ）
前の記事でPicasaの写真を一覧表示するプラグインを使ってWordpressに表示したときに、クライアントではFancyboxを使おうと実装してみた。
ただ、大量の写真を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');
}
});
})
＜関連記事＞