window.addEventListener(‘load’,…) を使ったローディングアニメーション（SVG）の実装

JavaScriptを使ったローディングアニメーション（SVG）。

備忘録として。手順は以下。

• ローディングSVGファイルをサーバーに配置。
• ローディング待ちさせたいボックス要素内にローディングSVGのHTMLを記述。
• ローディングアニメーションおよび背景マスク等のCSSを適用。
• ローディングアニメーション制御用のwindow.addEventListener(‘load’,…) スクリプトを記述。

<div class="mainVisual">
    <div id="loader-bg" class="is-hide">
        <div id="loader" class="is-hide">
            <img src="theme/***/img/common/loading.svg" />
        </div>
    </div>
</div>

/* ローディング待ちさせたいボックス要素にposition: relativeを指定 */
.mainVisual {
  position: relative;
}

/* 非表示 */
.is-hide {
    display: none;
}
/* 背景マスクをフェードアウト */
.fadeout-bg {
    transition-property: opacity;
    transition-delay: .3s;
    transition-duration: .5s;
    opacity: 0;
    pointer-events: none;
}
/* ローダーをフェードアウト */
.fadeout-loader {
    transition-property: opacity;
    transition-delay: .3s;
    transition-duration: .3s;
    opacity: 0;
    pointer-events: none;
}
/* 背景マスク */
#loader-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #F9F9F9;
    left: 0;
    top: 0;
    z-index: 1;
}
/* ローダーのサイズ、レイアウト指定 */
#loader {
    position: absolute;
    width: 200px;
    height: 200px;
    left: 50%;
    top: 50%;
    margin-left: -100px; /* ローダーサイズの2分の1 */
    margin-top: -100px; /* ローダーサイズの2分の1 */
}
#loader img {
    width: 200px;
}

ひとまず、bodyの閉じタグ前辺りに以下のスクリプトを配置。

<script>
    var bg = document.getElementById('loader-bg');
    var loader = document.getElementById('loader');
    bg.classList.remove('is-hide');
    loader.classList.remove('is-hide');
    window.addEventListener('load', stoploader);
    setTimeout('stoploader()',5000); //5秒で強制的に処理停止
    function stoploader(){
        bg.classList.add('fadeout-bg');
        loader.classList.add('fadeout-loader');
    }
</script>

参考にさせていただいたサイト：エコムクリエーション - 脱jQuery！ JavaScriptを使ってやってみよう【ローディング画面を実装する Chapter.3】