Carpe Diem

備忘録。https://github.com/jun06t

JavaScriptで擬似ローディング

jQueryをいれて動的なWebコンテンツにしたはいいけど、データ増えてローディング処理の見た目が悪い。 そう思い何かいいローディング方法がないかと探したらありました。 Flashのローディングみたいな動作をJavaScriptで実装します。 図のように、ページ読み込み時に対し画面全体にdiv要素を上乗せしておいて、これをフェードさせるわけです。 fade.jpg ※画像はソース元から引用 この図の
はページ全体を#FFFで覆っています。これを消したり出したりするわけです。 スクリプト
/* ---------------------------------------------------------------
	
	MAIN.JS
		
--------------------------------------------------------------- */


//windowFade
$('head').append('<style type="text/css">#fade{display:block;height:' + $(window).height() + 'px}</style>');
function windowFade(){
	$('#fade').each(function(){
		$('#fade').fadeOut(1000).height($('body').height());
		$('a').click(function(){
			var url = $(this).attr('href');
			if( this.href.match(location.hostname) && $(this).attr("href").charAt(0) != "#" && !$(this).attr("rel") && !$(this).attr("target") ){
				var LinkURL = $(this).attr("href");
				$('#fade').fadeIn(1000,function(){
					location.href = LinkURL;
				});
				return false;
			}
		});
	});
};
$(window).load(function()   
{     
  windowFade();     
});  
window.onunload = function() {
	windowFade();
};
$('a').click(function()から始まる部分は<a>要素をクリックした時の動作です。#によるページ内リンクでは動作しないようにするためのものです。 なのでページの読み込み時のみローディング動作をさせたい場合は$('a').click(function()の部分は削除してください。 またコードを読むとわかりますが、jQueryが必要なので <script type="text/javascript" src="./jquery.min.js"></script> などして読み込んで置いてください。 ◆HTML 最初に読み込む必要があるので、以下を body のすぐ後に挿入してください。 <div id="fade"> <table width="100%" height="100%" align="center" vertical-align="middle">   <tr>     <td width="100px" height="31px" align="center" ><img src="./loading.gif" width="100" /></td>   </tr> </table> </div> ローディングのイメージ画像は、自分で作れなければ以下のサイトから作成するといいです。 Ajaxのローディング画像が作れるジェネレータまとめ CSS 上記のスクリプトではid="fade"に対して動作させているので、CSSでdiv要素の設定をします。 #fade { position: absolute; /* ie6 */ position:fixed; top: 0; left: 0; width: 100%; height: 100%; min-height: 100%; background: #fff; text-indent:inherit; z-index:9990; } なぜか参考サイトと同じ記述では画面全体がdivで覆われなかったので、min-heightをつけました。 以上で動作します。 しない場合は id、jQueryの指定、CSSファイルの指定などを確認してみてください。 ソース: javascriptで擬似ローディングを実装してみた