やわらかしかっけい

なんでもすぐに忘れてしまう自分のために

jQueryで、loading

HTML,CSS,javascript

JavaScriptがそもそも苦手すぎて、
どうもVueとかReactをやる気になれない。

結局たよりになるのはjQuery、、、

気をつけたところ

Scriptは、対象となるDOM要素（#loader-bgなど）の後ろに書かないと、
エラーが出ることがあるっぽい。

追記2 一瞬ちらっと見えちゃう問題

JS内で指定するのではなく、
noscriptの中にstyleタグを記述・loaderをdisplay:none;書いておくことで解決
（これをやらないとJSがない環境で永遠にloadingしてしまう）
参考
cly7796.net

追記 エラー対応

Safariで再読み込みした際に、ローディングのまま動かなくなるエラーが発生。

なので、Scriptの $(function() { 部分を以下のJSに書き換えました。

window.addEventListener('DOMContentLoaded', function(){

参考
pisuke-code.com

コード

<head>
〜〜〜
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<style>
#loader-bg {
  background: #dbdbdb;
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 5000;
}
#loader {
  height: 61px;
  left: 50%;
  margin-left: -18px;
  margin-top: -30px;
  position: fixed;
  top: 50%;
  width: 36px;
}
#loader p { text-align: center; }
#loader p img { display: inline-block; }
</style>
<noscript>
	<style>#loader-bg,#loader {display: none;}</style>
</noscript>
</head>
<body>
<div id="loader-bg">
    <div id="loader">
        <p>
            <img src="/img/loading.gif">
        </p>
    </div>
</div>
<script>
window.addEventListener('DOMContentLoaded', function(){
var bg = $('#loader-bg'),
    loader = $('#loader');

$(window).on('load', stopload);
setTimeout('stopload()',10000);
function stopload(){
    bg.delay(900).fadeOut(800);
    loader.delay(900).fadeOut(300);
    $(window).scrollTop(0);
}
});	
</script>
<!-- /loading -->
<div id="wrap">
〜〜〜