くりゅぴ!

サーバーやWEB問題解決のメモから生活お得情報まで。未分類のものは執筆中

ネィティブなJsとCSS3でローディング画面を作成

なぜネィティブなJavascriptを選ぶのか?
・ロード画面なのでできるだけ早く呼びたい→ヘッド部分で呼み込みたい
・jQueryなどライブラリをヘッドで呼び出すと無駄な時間を使うことになる→そもそもJsをヘッダにできるだけ書きたくない

こういった理由です。
ある程度ロードした状態からロード画面が出てきても意味がないので。

head閉じ直前に以下を追加する。

<style>
            #loading-bg{
                position: fixed;
                width: 100%;
                height: 100%;
                top: 0px;
                left: 0px;
                background-color: #fff;
                z-index: 9999;
            }
            .loading {
                position: fixed;
                top: 50%;
                left: 50%;
                width: 60px;
                height: 60px;
                margin-top: -30px;
                margin-left: -30px;
                border: 5px solid rgba(0,0,0,0.4);
                border-top-color: rgba(0,0,0,0.9);
                border-radius: 50%;
                animation: spin 1.2s linear 0s infinite;
            }
            @keyframes spin {
                0% {transform: rotate(0deg);}
                100% {transform: rotate(360deg);}
            }
</style>
<script>
            window.onload = function () {
                document.getElementById('loading-bg').remove();
            };
</script>

body開始すぐに

<script>
            var e = document.createElement('div');
            e.innerHTML = '<div class="loading"></div>';
            e.id = 'loading-bg';
            document.body.appendChild(e);
</script>

これでOKです。

CSS3でロードのぐるぐる部分を作成して、
Javascriptで全面を覆うhtmlを作成、ロード完了後にそれを削除。
といった動きとなります。

javascriptが動かない人には特に何も発生しない仕様です。

参考
css だけのロード画面
ページ読み込み中にローディング画面を表示する
【脱jQuery】JavaScriptをネイティブで書くときのあれこれTips
HTMLの読み込みが完了してから実行
ページの読み込み前・直後・完了時にスクリプトを実行する方法いろいろ
[Javascript] 動的に要素を作成する為のあれこれ
【JavaScript】bodyに要素を追加
ネイティブ JavaScript の remove メソッド

WEB開発

タグ: ,

WEB開発の最新記事

2020年7月13日
印刷時改ページをする
2020年7月10日
PHPのJsを外部ドメインより呼び出す
2020年7月10日
ブラウザにキャッシュさせない

コメントを残す

メールアドレスが公開されることはありません。