Permalink
Browse files

ローディング演出の追加

  • Loading branch information...
ryosuketter committed Sep 2, 2017
1 parent 938a841 commit a140650beeb45e7daf1b59b1af0b08577e915c62
Showing with 110 additions and 3 deletions.
  1. BIN img/dog_logo.png
  2. +2 −0 index.html
  3. +83 −3 index.js
  4. +25 −0 style.css
BIN +4.47 MB img/dog_logo.png
Binary file not shown.
@@ -14,6 +14,8 @@
<script src="./index.js"></script>
</html>
<body>
<div class="loading-Bar"></div>
<img class="loading-Img" src="./img/dog_logo.png" alt="ロゴ" style="display:none;">
<div class="header">
<p>header</p>
</div>
@@ -3,7 +3,87 @@ $(function(){
$(".contents").css("display","none");
});
$(window).on("load",function(){
$(".contents").fadeIn("slow");
$(".header").delay(2200).slideDown("slow");
$(function(){
// loading状況の初期化
// loadCount:読み込まれていく画像の数をカウントする変数
var loadCount = 0;
// なんかの初期化
var aCnt = 0;
// ローディング中、中央に現れる画像
$(".loading-Img").delay(1000).fadeIn("slow");
// imgが読み込まれるタイミングを監視
// Edgeと、IEキャッシュ問題の解消
// imgタグそれぞれに対して、functionの中を実行しなさいという命令
$("img").each(function(){
// イメージオブジェクトを作成している
// $(this)は、ある1つのimgタグを指しているので、そのimgタグのsrcをイメージオブジェクトのsrcに設定
// これにより、イメージオブジェクトのwidthで、画像が読み込まれたときに、imgタグのwidthと連動することになる
// なぜ、widthを見るか、読み込まれの指標としたいから
var img = new Image();
img.src = $(this).attr("src");
// イメージオブジェクトがwidthを持つまで、widthが 0以上かどうかを調べるためのタイマー
// cntは、タイマーの繰り返し回数を数えていて、10回を超えたら画像が全て読み込まれたものとする
// 画像が読み込まれるのが失敗することもあるかもしれないので、そのときには、バーを伸ばしてスルーする
var cnt = 0;
var timer = setInterval(function(){
cnt++;
// || は or
// これは、画像が読み込まれたら、つまり、widthが0以上の値をとった時の処理をわけている
// 画像が読み込まれたら、タイマーを止めています。
if(img.width > 0 || cnt > 10){
cnt = 0;
// setInterval内の関数を止める処理 clearInterval
clearInterval(timer);
// 読み込む画像の数を取得
// これで、読み込まれた画像の数と、ページの全体の数が同じなら、全部画像が読み込まれているのがわかるので
// コンテンツをフェードイン、メニューをスライドダウンなどの処理のタイミングの指標になる
imgLength = $("img").length * 10; //imgLengthは170読み込まれることになる
loadCount++;//1~17枚まで増える
$(".loading-Bar").css({
//読み込まれた画像の数を画像全体で割り、%としてローディングバーのwidthに設定
"width": (loadCount / imgLength) * 100 + "%"
});
}
}, 50);
// タイマーは50msで動いている。画像がキャッシュにあっても50ms間隔で画像の数、線は段階的に100%まで伸びて行く
var tndST = setInterval(function(){
loadCount++;
aCnt++;
if(aCnt > 9){
clearInterval(tndST);
aCnt = 0;
} else {
$(".loading-Bar").css({
//読み込まれた画像の数を画像全体で割り、%としてローディングバーのwidthに設定
"width": (loadCount / imgLength) * 100 + "%"
});
}
if(loadCount > imgLength){
//100%読み込まれたらローディングバーを隠す
// バーをfadeOutする。
$(".loading-Bar").delay(1800).fadeOut("normal");
// ロゴをフェードアウトする。
$(".loading-Img").delay(2000).fadeOut("normal");
$(".contents").fadeIn("slow");
$(".header").delay(2200).slideDown("slow");
}
},320);
// タイマーは320msで動いている。画像がキャッシュにあっても320ms間隔で画像の数、線は段階的に100%まで伸びて行く
});
});
@@ -35,3 +35,28 @@ img {
height: 10%;
margin: 0;
}
img.loading-Img {
width: 30%;
height: 20%;
}
.loading-Bar {
position: fixed;
top: 0;
left: 0;
background: #111111;
height: 4px;
-webkit-transition: all 0.4s linear 0s;
transition: all 0.4s linear 0s;
width: 0;
}
.loading-Img {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}

0 comments on commit a140650

Please sign in to comment.