メニュークリック時~次画面が表示される間「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);
});
});
補足させていただきます。わかりにくくてすみません。
サイドメニュー固定で、クリックしたメニューに応じてメイン部の表示が変わるような
よくある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>
<script language="Javascript"></p> <p> $(function() {</p> <p> $('.demo').click(function() { </p> <p> $.blockUI({ </p> <p> message: 'Now Loading',</p> <p> css: { </p> <p> border: 'none', </p> <p> padding: '10px', </p> <p> backgroundColor: '#333', </p> <p> '-webkit-border-radius': '10px', </p> <p> '-moz-border-radius': '10px', </p> <p> opacity: .5, </p> <p> color: '#fff' </p> <p> },</p> <p> overlayCSS: { </p> <p> backgroundColor: '#000', </p> <p> opacity: 0.6 </p> <p> } </p> <p> }); </p> <p> setTimeout($.unblockUI, 20000);</p> <p> });</p> <p> });</p> <p></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()という記述を取り除く、など、わかってないなりに一応試せることは試してみました。(的はずれかもしれませんが)
以上宜しくお願い致します。
コメント欄のお言葉に甘えまして。
その方法ですが、なんというかアドホックなやり方ですので、JavaScriptのコードによっては上手くいかないことがあると思います。
コメント欄のお言葉に甘えまして。
その方法ですが、なんというかアドホックなやり方ですので、JavaScriptのコードによっては上手くいかないことがあると思います。
ありがとうございました。
おかげさまでJavascript,jQueryに興味を持つことができました。
今後はプラグインをただ使うだけという状態から少し脱却していけたらなと思います。
ありがとうございました。
2014/02/26 20:07:42おかげさまでJavascript,jQueryに興味を持つことができました。
今後はプラグインをただ使うだけという状態から少し脱却していけたらなと思います。