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

2011.12.21

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

サンプル

スプラッシュスクリーンを開く(このサンプルは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);
});

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