Xpageを開いた際にローディング画面を表示する

[ top.xps (Xpage) ]----------------------------------------------------------------
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
	
	<xp:this.resources>
		<xp:script
			src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"
			clientSide="true">
		</xp:script>
		<xp:script src="/loading.js" clientSide="true"></xp:script>
		<xp:styleSheet href="/style.css"></xp:styleSheet>
	</xp:this.resources>

	<div id="loader-bg">
		<div id="loader">
			//ローダーのGIFファイルのURLを指定
			<xp:image url="/Loading.gif" alt="Now Loading...">
			</xp:image>
			<p>Now Loading...</p>
		</div>
	</div>

	<div id="wrap">
	
		//ローディング画面後の内容を記載

	</div>

</xp:view>

[ loading.js (JavaScript) ]----------------------------------------------------------------
$(function() {
	var h = $(window).height();

	$('#wrap').css('display','none');
	$('#loader-bg ,#loader').height(h).css('display','block');
});

//全ての読み込みが完了したら実行
$(window).load(function () {
	$('#loader-bg').delay(900).fadeOut(800);
	$('#loader').delay(600).fadeOut(300);
	$('#wrap').css('display', 'block');
});
 
//10秒たったら強制的にロード画面を非表示
$(function(){
	setTimeout('stopload()',10000);
});
 
function stopload(){
	$('#wrap').css('display','block');
	$('#loader-bg').delay(900).fadeOut(800);
	$('#loader').delay(600).fadeOut(300);
}

[ style.css (CSS) ]----------------------------------------------------------------
/*ローディング画面の背景*/
#loader-bg {
	display: none;
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	/*背景色*/
	background: #fff;
	z-index: 1;
}

Select XSnippet to copy to Clipboard