Home
CSS
画像の読み込み進度を%表示するオープニングアニメーション

画像の読み込み進度を%表示するオープニングアニメーション

画像の読み込み進度を%表示するオープニングアニメーション

どうも!かけちまるです!

例えば写真家さんのポートフォリオサイトなどWebサイトに画像をたくさん使うとき、ページの読み込みに時間がかかってしまう場合があると思います。
サイトが表示されても画像の読み込みが遅れて画像が見れなくてはユーザーはそのページを見る気が失せてしまいます。
そんな時に画像の読み込み進捗をバーの長さと%で表現するオープニングアニメーションを実装すれば画像が見れない問題は解決されると思います。

プログレスバーとかプログレス表示機能とかいいますかね。
プログレス(progress)は日本語で「進捗」という意味です。

ちなみに読み込み進捗を数値%で表した方がユーザーはあと大体どのくらい待ったらいいかがわかるので親切です。

このオープニングアニメーションでは画像の読み込み状況を把握するimagesLoadedというJavaScriptライブラリを使用します。
imagesLoadedを使うことによって画像が総数に対して何枚読み込まれているか知ることができます。
他にもできることはあるみたいですけど今回はどのくらい画像が読み込まれているかという点でimagesLoadedを使います。

この記事では、

  • ・画像の読み込み進捗をバーの長さと%で表現するオープニングアニメーションを中心に
  • ・imagesLoadedライブラリの使い方をちょっと
  • ・あまり使わなそうなjQueryのオブジェクトをちょっと

解説していきます。

imagesLoadedの公式サイト:https://imagesloaded.desandro.com/

こんなのを作ります。
デモサイト

必要な処理を整理

初めに必要そうな処理をまとめていきましょう。
今回のプログレス表示で必要そうな処理は大きく分けて以下の3点です。

必要な処理
  • body内の画像がどのくらい読み込まれているか常に監視する処理
  • body内の画像の読み込み進度をテキストとバーに常に反映し続ける処理
  • body内の画像の読み込みが終了した後オープニングアニメーションを非表示にする処理

では、次のセクションから実際にソースコードを書いていきます。

jQueryの読み込み

前のセクションではプログレス表示に必要な処理をまとめました。
このセクションでは、jQueryを読み込んでいきます。

すでに読み込んでいる方はjQueryの読み込みは飛ばしてください。

CDNを使ってjQueryを読み込みます。

以下のコードをhead内にコピペでOK!

HTML
コピー
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

あなたがこの記事を読んでいる頃には上のコードが古くなっているかもしれないのでjQuery CDNの取得先ものせておきますね。

jQuery CDN:https://code.jquery.com/

imagesLoadedの読み込み

jQueryは読み込めました?
そしたらimagesLoadedライブラリを読み込んでいきましょう。

これもCDNで。
以下のコードをjQueryよりも下にコピペでお願いします。

HTML
コピー
<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>

今のところhead内はこんな感じ

HTML
コピー
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> <script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>

じゃあ次!HTMLとCSSいきます!

HTMLとCSS

imagesLoadedライブラリが読み込めたところでHTMLとCSSを書いていきましょう!

HTML

HTMLは最初%表示のところは0%で表示してください。
まぁ0%書かなくても最終的に動きは同じだけど分かりやすいと思って。

HTML
コピー
<div class="op_container"> <div class="op_inner"> <div class="op_text">0%</div> <div class="op_ber"></div> </div> </div>

CSS

CSSは.op_berwidthを0%で書いてください。
これも書いても書かなくてもどっちでもいいです。

CSS
コピー
.op_container{ background-color: #000; width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; } .op_inner{ width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } .op_text{ color: #fff; font-size: 16px; text-align: center; } .op_ber{ background-color: #fff; margin-top: 5px; width: 0%; height: 1px; }

以下の3つは好きなように色を変えてください。

  • .op_containerbackground-color
  • .op_textcolor
  • .op_berbackground-color

次のjQueryを書くとこからちょっと難しいのでがんばってください!

JavaScript(jQuery)

ここからちょっと難しいのです。
でも、ソースコード内にメモ程度ですが解説をいれてるので参考にしてください。
ぱっぱらぱな人はとりあえずコピペで動くと思います。

動かなかったら以下の3点を確認してみてください。

  • ・jQueryが読み込まれているか
  • ・imagesLoadedが読み込まれているか
  • body内にimgタグがあるか

ソースコードはこちら!

JavaScript
コピー
$(function(){ // プログレス表示の関数を呼び出す imagesProgress(); // 画像の読み込み状況をプログレス表示 function imagesProgress(){ // imagesLoadedライブラリでbody要素内の画像の読み込み状況を監視 var imgLoad = imagesLoaded('body'); // body要素内の画像の総数を変数へ格納 var imgTotal = imgLoad.images.length; // 読み込みが完了した画像の枚数を格納する変数 var imgLoaded = 0; // .op_berのwidthの値を格納する変数 var current = 0; // 1秒に60回のペースで画像の読み込み状況をチェック progressTimer = setInterval(updateProgress, 1000 / 60); // imagesLoadedライブラリを利用し、画像が読み込まれるごとにimgLoadedを加算 imgLoad.on('progress', function () { imgLoaded++; }); // 画像の読み込み状況をもとに // .op_textのテキストの値と // .op_berのwidthの値を変更します // このupdateProgress関数は上に書いたsetInterval()により1秒に60回のペースで呼び出されます function updateProgress(){ // 画像が何%読み込まれたか var target = (imgLoaded / imgTotal) * 100; // currentとtargetをもとにイージングをかける // 100に近づくにつれ遅くなる current += (target - current) * 0.1; // .op_textのテキストを反映 // Math.floor()関数で小数点以下を切り捨て $('.op_text').text(Math.floor(current) + '%'); // .op_berのwidthを反映 $('.op_ber').css({width: current + '%'}); // アニメーション終了処理 if(current >= 100){ // clearInterval()で上に書いたsetInterval()を解除する clearInterval(progressTimer); // ここに画像が読み込み終わった後の処理を書く setTimeout(function(){ $('.op_container').fadeOut(); }, 1000); } // currentが99.9よりも大きければ100としてアニメーション終了処理へ if(current > 99.9){ current = 100; } } } });

とりあえず動きました?

こんな感じになってればOK!
デモサイト
画像を増やしたり減らしたり試してみるとよいかと思います。

おわり

かけちまる
かけちまる
Webエンジニアをしています。
HTML/CSS/JavaScript/jQuery/PHPができます。
WEB制作を中心に日々学びになったこと、興味が沸いたことについて初心者の方でもわかりやすいようにアウトプットしていくブログです。

関連記事

【GSAP入門】使い方となにができるのか

【GSAP入門】使い方となにができるのか

フォントサイズを可変にする方法【CSSのclamp関数で実現】

フォントサイズを可変にする方法【CSSのclamp関数で実現】

【GSAP】registerEffectでアニメーションをテンプレート化する方法

【GSAP】registerEffectでアニメーションをテンプレート化する方法

SVGの背景色が変化するグラデーションのアニメーションを実装する方法

SVGの背景色が変化するグラデーションのアニメーションを実装する方法

CSS変数(カスタムプロパティ)の使い方

CSS変数(カスタムプロパティ)の使い方

【CSS】mix-blend-modeで乗算などを表現する方法

【CSS】mix-blend-modeで乗算などを表現する方法