PHPのプログラム内に重い処理を実行する部分がある場合、普通はその処理が終わるまでプログラムは先に進みまない。
ホームページの表示途中で重い処理がある場合、その処理を終わらせないと、ページは表示されない。
せめて途中まででも表示してくれればと思うが、まったくダメ。
固まっているかのように表示が変わらない。
まず、ホームページの軽い部分だけでも先に表示しておいて、重い部分は「Loading」などを表示ながらバックグラウンドで実行。実行できたら結果をHPに表示する。
これが、やりたいことである。
実際やり方はいくつかあると思われる。
だが、なるべくカンタンな方法で実現したい。
いろいろ調べたが結局この方法が一番カンタンだということで自分の中で落ち着いた。
ajaxの非同期処理を使ってバックグラウンドでphpを実行する方法である。
重いphpの処理とはいろいろあると思うが、カンタンにsleep(10);で代用する。
例えば、a.phpというプログラムがある。
<!--a.php--> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" dir="ltr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> 表示スタート <?php sleep(10); print "10秒経過!!"; ?> </body> </html>
「表示スタート」を出力し、10秒経過後、「10秒経過!」を出力するというもの。
このページにアクセスすると、ページは10秒経過しないと表示されない。
これをajaxを使って、先にページを表示し、10秒かかる処理はバックグラウンドで実行するようにしてみる。
上記でphpで処理している部分をfullwait.phpに切り出す。
<?php
//fullwait.php
sleep(10); print "10秒経過!!";
?>
このphpプログラムをajaxを使って呼び出して実行するようにしてみると、
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" dir="ltr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!--jquery.min.js読み込みは必須--> <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'>
</script> <script type="text/javascript"> $(function(){ $("#sample").load("./fullwait.php"); }) </script> </head> <body> 表示スタート <div id="sample" align="center"> <!--処理を実行中に表示する内容を記載--> <img src="ajax-loader.gif"alt="Now Loading..." /> <!--ローディング画像--> <p style="text-align:center;">Loading・・・</p> <!--ローディング表示--> </div> </body> </html>
これで、phpの重い処理はバックグラウンドで処理される。
このプログラムでは、処理結果が<div id="sample">の中に、バックグラウンドで処理中の際に表示される内容を記載しておき、fullwait.phpの処理が終わったら、fullwait.phpでの出力内容が<div id="sample">に置き換わって表示される。
これで、多少重たい処理も気にならなくなるし、ロード中が今風でよい感じ!!
関連)
⇒デコメテンプレートをスマートフォン(アンドロイド)にダウンロードするPHP