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

カテゴリ: JavaScript, jQuery, jQuery Mobile

記事投稿日: 2013年9月10日



概要

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

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

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

HTML

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

スタイルシート

jQuery

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

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








コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA




トップに戻る