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>

おすすめのレンタルサーバーを徹底比較!