人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

「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);
});
});

●質問者: kon39392
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

質問者から

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

サイドメニュー固定で、クリックしたメニューに応じてメイン部の表示が変わるような
よくある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()という記述を取り除く、など、わかってないなりに一応試せることは試してみました。(的はずれかもしれませんが)

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


1 ● Lhankor_Mhy
●200ポイント ベストアンサー

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


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

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ