js を使わずに PHPだけで、loading メッセージを出して終わったら消す

どうでもいい php tips

こんなことがあるので

管理画面を作っていて
長い処理とかでブラウザのタイムアウトとかを防ぐ為に
php だと

echo “Now Loading…”;

処理やってる間1ループごとに
echo “.”;

処理が終わってから
echo “End.”;

とか echo したりすると思うんですが、
それがお客にも見せるようなものだったりする特殊な場合
(ユーザがタイムアウトしそうな処理全部かもしれないけど)

echo した Now Loading… が画面にずっと残っちゃってうざいね

ってことで、 それを js を使わずに消してしまおうと。

魔法を使って解決します

魔法でも なんでもないんだけどw

こうする。

echo “<div id=’loading’>Now Loading…”;

処理やってる間1ループごとに
echo “.”;

処理が終わってから
echo “End.</div>”;

とPHPで書いておいて
CSS で

#loading {
display:none;
}

こう書けばOK。

これで、処理中は …. がどんどん増えていって
End が表示されて、
その後PHPの残りのプログラムが処理されて、
最後に html を生成して、display:none が当たって見えなくなるわけです。

HTMLの読み込み時間差を利用するかんじ。

応用するとこんなことが

PHPとCSSだけで可能です。

こんなこともできます。

ちなみにこれのソースはこんなかんじ。

<?php
ob_start();
echo "
<div id='loading' style='width:100%;margin:0;padding:0;height:100%;text-align:center;'>
<div style='position:absolute;top:50%;left:50%;margin-left:-7.5em;margin-top:-1em;'>
<div style='width:500px;'>
<ul id='loading' style='list-style-type: none;'>
";

for ($i=0;$i<10;$i++) { echo "<li style='float:left;margin:0px;border:1px solid #eeeeee;background-color:#F03B58;color:#F03B58;'>|</li>\n";
ob_flush();
flush();
sleep(1);
}

echo " </ul>
</div>
</div>
</div>
";

?>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>ローディングテスト
<style>
#loading {
display:none;
}
</style>
</head>

<body>
全部完了したらこれだけが表示されます。
</body>
</html>
</pre>

Leave a Reply