要約: $('.certainImage').bind('load', functionName); 形式の コードを 使えば なる.

fancybox ライブラリ増えた 力強い イメージ ギャラリー 機能を 取り揃えて ある.

ところが ie6‾8で 画面が ロードされて 薬 1‾2超 位 凍って 捨てる (プリージング) 現象が 観察された.

どっちみち イメージを 拡大して 見えて 与える 機能しか なかった だから fancyboxを とり除いて ナルコディングを することに 決めた.

必要となる ことで 思った 時間は 大略 1時間だった. しかし やっぱり 3時間が かかった.

一応 画面を 覆う 半透明 かけることは 幕(black mask) やっぱり 私が この前に 作って 置いた コードを 使った.

そして コンデンツを 呼んで 来て 画面 たいてい 中 打ちこむ コード度 私が この前に 作って 置いた コードを 使った.

ところが 問題が 生じた! こういう くそ! イメージが 完全に ロードされること 前に ボックス 幅と 高さを 計算すること だから 高さと 幅 皆 0で 処理 なる バグが 発見された.

イメージが 全部 ロードされる 時まで 待ってから 高さ 幅を 計算すると イメージが 画面の 情 中 庭 数 あるのに 言葉だ.

これ だから しばらくを 迷った. そして 結局 解法を 見つけた.

javacriptには onLoad という イベント ハンドラーが ある. こいつが ところで, イメージまで 完全に ローディングが 終わった 後 どうな ガール 行いなさいという イベント ハンドラーだ.

jQueryで イベントを 付ける 焚く 接頭語 onを 抜いて 使う.

そのため 下と ような コードで 解決した.

function loadLargeImage(href){

	if($('.large-image-box img').length == 0){
		//hrefを 受けて イメージ 客体を 作る.
		var $img = $('<img alt="" />',{
			'src': href,
			'style': 'border: 10px solid white;'
		});

		//ボックス 中に イメージを 打ちこむ
		$('.large-image-box').append($img);

		//イメージが 完全に ロードされれば イメージ 幅と 高さを 変数で 画面 情 中央 位置を 計算して フェードイン する.
		$img.bind('load', function(){

			$('.large-image-box').css({
				'left': ( $(window).scrollLeft() + ($(window).width() - $(this).width())/2 ) + 'px',
				'top': ( $(window).scrollTop() + ($(window).height() - $(this).height())/2 ) + 'px'
			}).fadeIn();	
		});

	}else{

		$('.large-image-box').css({
			'left': ( $(window).scrollLeft() + ($(window).width() - $(this).width())/2 ) + 'px',
			'top': ( $(window).scrollTop() + ($(window).height() - $(this).height())/2 ) + 'px'
		}).fadeIn();

	}	

}

有益な のを 学んだ 時間だった.

今 半透明 かけることは 幕と 一緒に レイヤード ポップアップを 浮かべる ガール 上手に 割 数 ある. 勿論, 私が 保存して 置いた コードを 掻くべきが 言葉だ.

- コメント機能はありません。コメントの代わりに[email protected]にメールを送ってください。