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

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

サイドメニュー固定で、クリックしたメニューに応じてメイン部の表示が変わるような

よくある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()という記述を取り除く、など、わかってないなりに一応試せることは試してみました。（的はずれかもしれませんが）

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