#はじめに
完全に後付でCSSとか使わずに(面倒くさいから)、いい感じにhtmlに画像表示するのに、あっちこっち検索したので備忘録的に作成。
基本的にCSS使ったいい感じのサンプルたくさんあるので、そっち使った方がいいです。
CSS変更できないけどjavascriptは変更できる環境の人向け(そんな人居るのか?)。
ローディングのgif画像は各自用意してください。
#ソースコード
javascriptの一番下にでもコピペしてください。
jquery使ってます。
$(function() {
var $btnLoading = $('.btn_loading');
$btnLoading.on('click' ,function(){
setTimeout(function(){
$('body').prepend('<div class="loading" style="display:flex; width:100vw; height:100vh; background-color: rgba(0,0,0,0.6); position:absolute; align-items:center; justify-content:center;"><img src="loading.gif"></div>');
},100);
});
});
ローディング画像挟みたいボタンに"btn_loading"のクラスを追加。
<input type="submit" value="OK" class="btn_loading">
#簡単解説
<div class="ajax-loader"
style="display:flex;
width:100vw;
height:100vh;
background-color:rgba(0,0,0,0.6);
position:absolute;
align-items:center;
justify-content:center;">
<img src="loading.gif">
</div>
bodyの一番上にウィンドウ全体透過度60%の黒の重なるdiv要素を追加してます。
あとgif画像を "display:flex; align-items:center; justify-content:center;" で上下左右の中央に表示するようにしてます。(これが地味にハマった)