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

(0) 概要


jQuery Mobile を使ってウェブアプリを作ろうとすると container の部分にリンク先のページを読み込むので データベースからデータを頻繁にひっぱってくるページの場合、 遷移後にコンテンツがきちんと取得できなかったり、 戻るボタンで戻れなくなったりします。 対策としては、jQuery Mobile の Ajax は停止するのが 常套手段なのですが、ページ遷移のトランジットができなくなるし、 ローディング画面も無くなってしまいます。 まず、せめてローディング画面だけでも別に実装してみようと 調べた結果、意外に簡単に組み込めましたので、 以下、覚書としておきます。

(1) HTML

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

(2) スタイルシート


#fade {
    width: 100%;
    height: 100%;
    background-color: #fff;
    margin: auto;
    text-align: center;
    z-index: 100;
    position: fixed;
    _position: absolute; /* IE6対策 */
    filter: alpha(opacity=50);  /* 0-100 */
    zoom:1;
    -moz-opacity: 0.5;  /* 0.1-1.0 */
    opacity: 0.5;  /* 0.1-1.0 */
    -ms-filter: "alpha(opacity=50)";  /* 0-100 */
}
#loader {
    margin: auto;
    text-align: center;
    z-index: 50;
    filter: alpha(opacity=50);  /* 0-100 */
    zoom:1;
    -moz-opacity: 0.5;  /* 0.1-1.0 */
    opacity: 0.5;  /* 0.1-1.0 */
    -ms-filter: "alpha(opacity=50)";  /* 0-100 */
}

(3) jQuery


        
// ローディング画像の位置を算出
// 画面の上から3分の1から表示するといい感じ
var body_height = $("body").height();
$("#loader img").css("margin-top", body_height/3);

// ローディング画像を表示して、ページの読み込みが終わったらフェードアウトさせる
$(window).load(function(){
    $('#fade').fadeOut(1500);
});

// リンクをクリックしたらローディング画面を再表示する
$("a").click(function() {
    $('#fade').fadeIn();
});
// end

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

・参考にしたサイト

で擬似的にローディング画面を実装してみた | ALOG | THE AGE

スマホ・タブレットの向きでVIDEOタグの大きさをコントロール

jQueryだと簡潔に書けます。
640pixel以下のときに、幅をきりのいい320pixelではなく
300pixelにしているのは、iPhone用です。
きっちり320pixelだと、はみだすので。

$(document).ready(function() {

    var default_max = $(window).width();
    chgVideoWidth(default_max);

    $(window).bind('orientationchange', function(e){

        var max = $(this).width();
        chgVideoWidth(max);

    });

    function chgVideoWidth(max){

        if(max > 640){
            $("#myVideo").attr("width", "640");
            $("#myVideo").attr("height", "480");
        }

        if(max < 640){
            $("#myVideo").attr("width", "300");
            $("#myVideo").attr("height", "225");            
        }

    }

});