ローディングアニメーション

2018.07.30

情報量が多いサイトだと読み込むまでに時間がかかり、レイアウトが崩れたかのように見えてしまう場合があります。
そんな時、読み込みの時間がかかるサイトやスライダーなどにローディングアニメーションを実装することがあります。

ローディングアニメーションの実装方法です。

仕組みとしては、すべての読み込みが完了するまでに、コンテンツ部分は非表示にして、ローディング画面を表示させている状態になっています。

 <div id="loader-bg">
    <div id="loading">
        <img src="ローディング用のgif">
    </div>
  </div>
<!--ロード画面-->
 
  <div id="wrapper">
    <!--メインコンテンツ-->
  </div>

</div>

</div>

window.onload = function(){  
    $(function() {
        $("#loading").fadeOut();
    });
}
     
$(function() {   
    var h = $(window).height();
    $('#wrapper').css('display','none');
    $('#loader-bg ,#loader').height(h).css('display','block');
});
      
$(window).load(function () {  
    $('#loader-bg').delay(900).fadeOut(800);
    $('#loader').delay(600).fadeOut(300);
    $('#contents').css('display', 'block');
});
 
$(function(){  
    setTimeout('stopload()',10000);
});

window.onload = function(){

$(function() {

$("#loading").fadeOut();

});

}

$(function() {

var h = $(window).height();

$('#wrapper').css('display','none');

$('#loader-bg ,#loader').height(h).css('display','block');

});

$(window).load(function () {

$('#loader-bg').delay(900).fadeOut(800);

$('#loader').delay(600).fadeOut(300);

$('#contents').css('display', 'block');

});

$(function(){

setTimeout('stopload()',10000);

});

#loading{
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -25px;
    margin-left: -25px;
  }
      
#loader-bg {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background: #fff;
    z-index: 1;
 }