Ajax をオフにした jQuery Mobile でローディング機能を実装する方法

概要

jQuery Mobile を使ってウェブアプリを作ろうとすると
container の部分にリンク先のページを読み込むので
データベースからデータを頻繁にひっぱってくるページの場合、
遷移後にコンテンツがきちんと取得できなかったり、
戻るボタンで戻れなくなったりします。

対策としては、jQuery Mobile の Ajax は停止するのが
常套手段なのですが、ページ遷移のトランジットができなくなるし、
ローディング画面も無くなってしまいます。

まず、せめてローディング画面だけでも別に実装してみようと
調べた結果、意外に簡単に組み込めましたので、
以下、覚書としておきます。

HTML

※　画像はジェネレータサイトがあるので簡単に作れます。
・Preloaders.net
http://preloaders.net/

スタイルシート

jQuery

jQuery Mobile はデザイン面では大変便利なのですが、
データベースと連携させたりすると途端に魅力が下がってしまいます。
が、このローディング機能を実装するだけでも、それらしさが
復活できるのはうれしいです。

・参考にしたサイト
javascriptで擬似的にローディング画面を実装してみた | ALOG | THE AGE