「Now Loading...」をjquery.blockUI.jsを使って作っています。


メニュークリック時~次画面が表示される間「now Loading...」がでるように下記のように実装しましたが、DBから取り出したデータをforeachで取得しながらテーブル表示するような画面を表示する場合に、まだ読み込み完了してないような状態でもすぐに半透明レイヤーが解けてしまいます。

やりたいことは、DBデータを全て読み込んでしまうまでは半透明レイヤーをかけておくような動きにしたいです。

readey状態と判断させないことが肝なんだろうとは思いますが、やり方がわかりません。
方法がありましたら教えてください。

//サイドメニュー
<a href="xxxxx" class="demo">テスト</a>

//jQuery
$(function() {
$('.demo').click(function() {
$.blockUI({
message: 'Now Loading',
css: {
border: 'none',
padding: '10px',
backgroundColor: '#333',
opacity: .5,
color: '#fff'
},
overlayCSS: {
backgroundColor: '#000',
opacity: 0.6
}
});
setTimeout($.unblockUI, 10000);
});
});

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2014/02/25 18:06:56
  • 終了:2014/02/26 20:08:04
id:kon39392

補足させていただきます。わかりにくくてすみません。

サイドメニュー固定で、クリックしたメニューに応じてメイン部の表示が変わるような
よくあるwebサイト的な感じの造りです。「次画面」と表現したのは画面遷移のことです。

実コードは下記です。

jQuery

■jQuery

<script src="js/jquery-1.8.3.js" type="text/javascript"></script>
<script src="js/jquery.blockUI.js" type="text/javascript"></script>

$(function() { $('.demo').click(function() { $.blockUI({ message: 'Now Loading', css: { border: 'none', padding: '10px', backgroundColor: '#333', '-webkit-border-radius': '10px', '-moz-border-radius': '10px', opacity: .5, color: '#fff' }, overlayCSS: { backgroundColor: '#000', opacity: 0.6 } }); setTimeout($.unblockUI, 20000); }); });</script>


■htmlサイドメニュー(の一部)
 li class="demo"
  a href="sample1" /a
/li
 li class="demo"
  a href="sample2" /a
/li

フレームワークはcodeigniterを使ってます。

例えばmodelで数百万件のテーブルから抽出処理をしたあと、結果をviewに表示させるだけのような場合だと、modelでの処理時間が長いため、上記のやりかた(メニュークリック時にイベントを発生させる)でうまく理想の動き(表示直前までNowLoadingがでる)をしてくれるのですが、view側でも若干処理がある場合(例えば一覧レコードセットをforeachで回しながら、その各レコードで条件判定しながら表示内容を変えるような場合や、表示させる表の件数が多い場合など)に、しばらくブラウザが白い状態が発生します。


あとは、ccchart.jsを使用して、グラフを表示させるページ等は、view側でccchart.jsによる処理を行っているにも関わらず、理想の動き(表示直前までNowLoadingがでる)をしてくれます。これはjsによる処理なので、完了するまでready状態になってないということなんだろうなと思っています。

それらの動きを見た結果、DB表示完了までready状態にしない手はないかと思い、このような質問をさせていただきました。

メニュークリック時ではなく、onload時に関数を呼んで実行させるとか$(function()という記述を取り除く、など、わかってないなりに一応試せることは試してみました。(的はずれかもしれませんが)

以上宜しくお願い致します。

ベストアンサー

id:Lhankor_Mhy No.1

Lhankor_Mhy回答回数779ベストアンサー獲得回数2302014/02/26 19:15:42

ポイント200pt

 コメント欄のお言葉に甘えまして。
 その方法ですが、なんというかアドホックなやり方ですので、JavaScriptのコードによっては上手くいかないことがあると思います。

id:kon39392

ありがとうございました。
おかげさまでJavascript,jQueryに興味を持つことができました。
今後はプラグインをただ使うだけという状態から少し脱却していけたらなと思います。

2014/02/26 20:07:42

その他の回答(0件)

id:Lhankor_Mhy No.1

Lhankor_Mhy回答回数779ベストアンサー獲得回数2302014/02/26 19:15:42ここでベストアンサー

ポイント200pt

 コメント欄のお言葉に甘えまして。
 その方法ですが、なんというかアドホックなやり方ですので、JavaScriptのコードによっては上手くいかないことがあると思います。

id:kon39392

ありがとうございました。
おかげさまでJavascript,jQueryに興味を持つことができました。
今後はプラグインをただ使うだけという状態から少し脱却していけたらなと思います。

2014/02/26 20:07:42
  • id:Lhankor_Mhy
     補足お願いします。
    ・ご提示のコードだと、おっしゃるような記述ではない(クリックされるとブロックし10秒後に解除される)と思うんですが、実際のコードをご提示いただくことは可能でしょうか?
    ・「次画面が表示される間」とありますが、この「次画面」とは具体的にはなんですか? XHRの応答をHTMLに出力した画面ということでしょうか? それともページ遷移をしているのでしょうか?
  • id:Lhankor_Mhy
     補足拝読。
     ページ遷移がある場合、前ページでのJavascriptの実行は途中で終了してしまいますので、これは動作しないと思います。
     遷移先の"sample1"などで.blockUI()を実行し、readyイベントを拾って.unblockUI()を実行すればいいように思うのですが、これは可能でしょうか?
  • id:kon39392
    試しに遷移先ページのonloadでblockUIを実行すると、DBデータを読み込んだ後(わかりやすくするためにあえてview上のforeach内に集計処理などを加えてみました)に、DBデータが全部表示された後にNowLoadingの表示が始まりました。
    onloadが最も早いイベントと思っていましたが、onload(=ready状態?)でunblockUIしなくてはならないようですね。
    onloadより前のタイミングのイベントというのはあるのでしょうか?
    引き続きお願いいたします。
  • id:Lhankor_Mhy
    body要素の最初に書くとかどうでしょう? スクリプトによっては動かないかもしれないですね。
  • id:kon39392
    ありがとうございます。

    bodyの上部に
    <script type="text/javascript">
    $.blockUI({
    message: 'Now Loading',
    css: {
    border: 'none',
    padding: '10px',
    backgroundColor: '#333',
    '-webkit-border-radius': '10px',
    '-moz-border-radius': '10px',
    opacity: .5,
    color: '#fff'
    },
    overlayCSS: {
    backgroundColor: '#000',
    opacity: 0.6
    }
    });
    </script>




    最下部に
    <script type="text/javascript">
    $.unblockUI();
    </script>

    と書くことで実現できました。

    最後までありがとうございました。

    javascriptは引用程度や入力チェックくらいにしか触ったことなかったですが、こんな動きするんだと勉強にもなりました。

    最後に回答欄に何か記入願えますでしょうか?

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません