３分でできるjQueryを用いたローディングの実装
今日は爆速でローディングを実装したいと思います。
KEY SENTENCE
[1] はじめに
[2] 実装手順
[1] はじめに
簡単な説明をすると、ローディングはjQueryに画面がロードされるまで仮ページを表示して、読み込まれたら正式なコンテンツを出してねって指示を与えているだけです。
それでは取り急ぎ、実装するためのコードを記載していきます。
[2] 実装手順
HTML,CSS,JSの順で記載していきます。
HTML
<div id="loading">
<img src="../('任意のディレクトリ')/sample.jpg">
</div>
<div id="fade">
</div>
<div id="page">
<!-- 'ここにコンテンツが入ります。' -->
</div>
CSS
#loading {
position: absolute;
left: 50%;
top: 35%;
margin-left: -30px;
}
#fade {
width: 100%;
height: 100%;
display: none;
position: absolute;
background: #ffffff;
top: 0px;
left: 0px;
z-index: 50;
}
JS
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$('head').append(
'<style type="text/css">#page { display: none; } #fade, #loading { display: block; }</style>'
);
jQuery.event.add(window,"load",function() { // 全ての読み込み完了後に呼ばれる関数
var pageH = $("#page").height();
$("#fade").css("height", '100%').css("background", '#fff').delay(600).fadeOut(300);
$("#loading").css("height", '100%').delay(600).fadeOut(300);
$("#page").css("display", "block");
});
</script>
駆け足でとりあえずコードを記載していきました。
何も考えずにコードを打ち込めばあら不思議！ローディングが実装されるではありませんか。
上記では画像を用いての表記にしてありますが、もちろんCSS3のanimation機能を使っていただいたり、ブロックコンテンツで好きな要素を別に見せたりと#loadingをいじっていくだけで自由なローディング画面を作っていくことができます。
今回はあくまでも導入ということで！
Siyabonga ekufundeni kwakho.(訳：最後まで読んでくれてありがとう。 / 注：ズールー語)
