php処理中にローディングを表示する簡単な方法

記事をシェアして貰えると嬉しいです。

ページにローディングを表示する場合、一般的な実装はブラウザ読み込み中の表示を行う実装。しかし、この場合phpの関数を呼び出していると関数の戻りが返ってくるまでローディングの表示がされません。

これではphp関数処理中にローディングが表示されないため仕組みを考えて実装しました。

こちらで紹介するのはphp関数処理中にローディングを表示する方法です。

searchnum
実装サイト:SearchNum

目的(要件仕様)

検索ボタン(submit)をクリック時にローディングアイコンを表示し、処理完了後にローディングアイコンを非表示にする。

画面遷移

1.初期画面

loading1

2.ローディング画面

loading2

3.終了画面

loading3

実装

ローディングHTML

ローディング画像を表示する箇所にhtmlを記述します。

ボタンクリック

検索ボタン(submit)クリック時にjavascriptを呼び出す記述をします。呼び出し箇所はonClick=”disp()”です。

ローディングの表示

呼び出されたjavascriptではローディング画像をhtml(ページ)に追加します。

ブラウザの再読み込み

検索ボタン(submit)クリック時には別の箇所でphpの関数が呼び出されています。php関数の処理が完了するとブラウザが再読み込みされ、ページが構成されます。このとき、追加されていたローディング画像は再読み込みによって初期状態に戻っているため、表示されていません。

まとめ

ブラウザの読み込み状態でローディングを表示させる実装はgoogleで検索すると多くの方が教えてくれています。しかし、php関数呼び出し時にローディングを表示させる実装は見つけられませんでした。

こちらで紹介した実装はonClockイベント発生時にjavascriptでhtmlコードを追加する処理です。関数やAPIで外部呼び出しを行っているサイトで実装して見ては如何でしょうか?

by ChiyoPen

(Visited 2,178 times, 1 visits today)

この記事が良かったらシェアしよう

ChiyoPenを購読しよう

コメントをどうぞ▼

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)