jQueryMobileでスプラッシュスクリーンを試してみた

サンプル

スプラッシュスクリーンを開く（このサンプルはChromeブラウザでの閲覧をおすすめします。）

見逃してしまった方はリロードを。

iPhoneで見る前提で作成してみました。見た目上はそれっぽくできてますね。

仕組み

仕組みはとても簡単で、DOMの準備が終わった段階でsetTimeoutを使い別のページに遷移させています。

HTMLソース

スプラッシュ用の画像は640px * 960pxの画像を用意してwidth,height共に100%表示にしています。

<div id="splash" data-role="page">
	<img src="http://public-blog-dev.s3.amazonaws.com/wp-content/uploads/2011/12/splash.jpg" alt="" title="splash" width="100%" height="100%" class="alignnone size-full wp-image-16410" />
</div>

<div id="home" data-role="page">
	<header data-role="header">
		<h1>Inbox</h1>
	</header>
	<div data-role="content">
		<p>コンテンツ</p>
	</div>
</div>

JavaScript

$.mobile.changePageを使ってページを変更します。

$(function(){
	setTimeout(function(){
		$.mobile.changePage("#home",{transition:"fade"});
	},3000);
});

色々なデバイスに対応させる場合はもう少し試行錯誤が必要ですが、足がかりにしていきたいと思います。