jQueryを使って簡単にできるローディング画面を作ってみた
フルスクリーンで動画や画像を表示しようとしたりすると、必然的にサイズが大きくなりサイトが重くなってしまい、ページの表示速度が遅くなってしまう事があると思います。
ページの表示が遅いと『即、戻るを押す』。僕もネットサーフィンをしている時についやってしまいます。
コンテンツが表示されるまでの間に代わりに表示させておくローディング画面を作っていきたいと思います！
これが今回の完成図です。
ローディング画像を用意する
今回はgifアニメーションでこんな感じの画像を用意しました。
ロード画像のgifアニメーションはPhotoshop等で作成できますが、フリー素材も調べれば色々ヒットするので、そちらを使うのも手かもしれません。
今回僕もこちらのサイトのものを使用させていただきました。
FREE Minimal Loop Preloaders | MarinaD
http://marinad.com.ar/free-minimal-loop-preloaders/
HTMLとJavascriptを記述
HTMLの記述はこんな感じになります。
- HTML
-
12345678910111213141516171819202122
<head>・・・<scripttype="text/javascript"src="js/jquery-1.11.0.js"></script><scripttype="text/javascript"src="js/function.js"></script></head><body><!--ロード画面の記述--><divid="loader-bg"><divid="loading"><imgsrc="images/loading.gif"></div></div><!--ロード画面の記述ここまで--><divid="contents"><p>ロードが終わるとコンテンツが表示されます。 </p></div></body>
- Javascriptファイルは今回、『function.js』としていますが、名前は任意です。
- <div id=”loader-bg”>〜</div>がロード中に表示される内容になります。
HTMLは、これで準備OKなので、次に『function.js』の中身を記述していきます。
- function.js
-
123456789101112131415161718192021
window.onload =function(){// ローディング画面をフェードアウトさせる$(function() {$("#loading").fadeOut();});}$(function() {//ロード中はコンテンツの高さをページの高さに合わせるvarh = $(window).height();$('#contents').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(){//10秒たったらロードを終わらせるsetTimeout('stopload()',10000);});
これでロード画面は表示されるようになりました！
後はスタイルシートをいじってスタイルを整えてやれば完成です！
ご参考までに、今回のスタイルシートはこんな感じにしています。
- css
-
1234567891011121314151617181920212223242526272829303132
#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;}body{background:#ccc;}#contents p{position:absolute;line-height:30px;width:600px;text-align:center;top:50%;left:50%;margin-top:-15px;margin-left:-300px;}
まとめ
たったこれだけの記述で導入できる上に、画像やSCCによって雰囲気も簡単に変えることができるので、かなり導入しやすいのではないでしょうか。
アパレル系など、魅せ方にもこだわりたいサイトで使ってみるのも良いかもしれません。
それでは、また。
2017.03.02
