ボタンを押したあとに画像を表示させる方法についてアドバイスお願い致します

ファイルアップロードが可能な Q＆A 掲示板を作成しており入力画面のボタン送信の際に時間がかかる為、確認画面に切り替わるまでローディングアニメーション画像を表示したいと考えております。
ボタンの上に重なる形で実装したいのですが、座標を指定する方法以外で画像をボタン上に表示させる方法はありますでしょうか？
座標はスマホやタブレットの端末ごとに異なる為、別の方法で考えております。
Ajax を使う方法もあると思うのですが入力画面から確認画面までを非同期通信で行っているため、速度を考えて極力避けたいです。

※該当コード（bbs_quest_input.php）
https://wandbox.org/permlink/hYhRZBA0NG6HbOIw

※ローディングアニメーション
https://nagashima.kyusan-u.ac.jp/note/loading-an …

※送信が完了するまでローディング
https://moshashugyo.com/media/loading

No.1 ベストアンサー 回答者： fujillin 回答日時： 2024/02/18 23:36

こんばんは

ご質問の内容が、よくわかりませんけれど・・・

＞ボタンの上に重なる形で実装したいのですが、座標を指定する方法以外
＞で画像をボタン上に表示させる方法はありますでしょうか？
という事であるなら・・
両方の要素を同時に見せることはないのでしょうから、初めから重ねてレイアウトしておいて、状況に応じて一方（＝上になっている要素）の表示/非表示を制御すれば良いのではないでしょうか？
（アニメーションを何で行っているのかも不明ですけれど、例えばGIFみたいなものとして）

　<wrapper要素>
　　<ボタン要素 />
　　<アニメーション要素 />
　</wrapper要素＞
とでもしておいて・・
CSSで、
　wrapper要素 { position: relative; }
　アニメーション要素 { position:absolute; top:0; left:0; }
としておけば、ボタンとアニメーションが同じ位置に表示されます。
座標指定と言えば座標指定ですけれど、ブラウザ幅などには影響されずにレイアウトできますので、問題はないものと想像します。
あとは、アニメーション要素の表示/非表示を制御すれば良いでしょう。
（順序を逆にしても同じことですが・・）

この回答へのお礼

アドバイスありがとうございます。参考コードとても助かりました。

プランを変更して画像を表示させる方法からボタンに動作を加える方法にいたしました。

お礼日時：2024/02/27 19:04