WEBページダウンロード時に時間がかかっている時に
ユーザーに待っていただくための簡易ローディング画面を紹介します。
↓以下が実際のソースサンプルです。
▼JavaScript
<script src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
$('head').append(
'<style type="text/css">#container { display: none; } #fade, #loader { display: block; }</style>'
);
jQuery.event.add(window,"load",function() {
var pageH = $("#wrapper").height();
$("#fade").css("height", pageH).delay(900).fadeOut(800);
$("#loader").delay(600).fadeOut(300);
$("#wrapper").css("display", "block");
});
</script>
＊変数にてdivの高さの値を取っています。
jQueryがオフの場合はローディングを無視して表示する設定です。
▼CSS
<style type="text/css">
#loader {
width:128px;
height:128px;
display: none;
position: fixed;
_position: absolute;
top:50%;
left:50%;
margin-top:-64px;
margin-left:-64px;
z-index: 100;
}
#fade {
width:100%;
height:100%;
display:none;
background-color:#FFF;
position:absolute;
top:0px;
left:0px;
z-index:50;
}
</style>
▼HTML
<body> <div id="loader"><img src="アニメーション画像のパス" width="画像の幅" height="画像の高さ" alt="Loading中" /></div> <div id="fade"></div> <div id="wrapper"> 使用するWEBページソースを入れてください。 </div> <!-- /wrapper --> </body>
今回、参考にさせていただいたのは、
『HTML版簡易ローディング画面設置jQuery – WPC』さんを参考に作成しました。
ありがとうございます。
