模写修行メディア

【超簡単】JavaScript(jQuery)を使ってローディングを実装する方法!

少し前の記事ですが、webサイト監視サービスの「Pingdom」から読み込み時間による直帰率のデータが公開されました。読み込み時間ごとの直帰率のデータは以下のようになっています。

  • 読み込み時間が2秒以内の場合、直帰率は9%。
  • そして3秒から大幅にアップし、5秒の時点で38%に達する。

また、Googleからも2018年1月にSpeed Updateの公式発表がありました。こちらは、「これまでデスクトップのみ読み込み速度を検索ランキングを構成する要因としていましたが、今後モバイルも対象にしますよ」といったものです。

これらのデータから、表示速度が重要とわかります。しかし、サイトの仕様上どうしても、読み込みに時間がかかってしまうこともあります。その際に、表示速度から受ける影響をいかに抑える対策が重要になります。この記事では、その対策の一つでもあるローディングの実装方法について紹介します。

JavaScriptの基礎学習がまだの方は、下記の記事も参考にしてみてください。

JavaScriptの勉強ができるおすすめの本やサイト紹介!

👇 メンターやってます 👇

模写修行やこのメディアを作ったエンジニア中心に、メンタリングサービスHello Mentorを運営しています。

0からweb制作やプログラミングの勉強を始める方はもちろん、12ヶ月以上独学している方や既にお仕事をしている方にもご利用いただいています!

模写武者くんのアイコン
  • 独学に限界を感じている...
  • 何をどこまで勉強すれば良いかわからない...
  • 自分の書き方が正しいかわからない...
  • 検索しても解決しない問題が多い...
  • 転職や副業のアドバイスが欲しい...

このような方は、ぜひ下記のリンクからサービス詳細をご覧ください。個別説明会もお気軽にお申し込みください。

※ 少人数運営のため人数制限あり ※

詳しいサービス内容を見る

転職・独立成功者も出ています!

👆 メンターやってます 👆

この記事の目次

ローディングを導入する前に考慮すべきこと

まずは、本当に**「ローディングを導入すべきか?」**を考える必要があります。読み込み時間があまりかからないのであれば、ローディングは邪魔になる場合もあります。

読み込みが遅い原因として、サーバーやファイルサイズ関連の問題があります。まずはこれらの対策を行い、それでも遅い場合はローディングの導入を検討しましょう。

  • サーバーのスペック
  • 画像や動画の最適化

最低限、これらの項目は、見直しましょう。

サーバーの見直し

webサイトの場合はレンタルサーバーで運用することが多くなると思います。サーバーのスペックによって、表示速度が体感できるほど変わることもあります。

以前、お名前.comのSDプラン(今はない旧プラン)からエックスサーバーに移行した際は、体感できるほど速くなりました。

お名前.comのRSプランやエックスサーバーであれば、サーバーが問題で遅くなることはありません。格安のサーバーを使う場合、遅くなることもあります。

画像や動画の最適化

画像や動画の容量は、表示速度に大きく関わってきます。従って、まずは容量が必要以上に大きくないか確認しましょう。

  • 画像や動画圧縮
  • 最適なサイズを表示

これらを行いましょう。

圧縮はオンラインのツールやタスクランナーで行うと良いです。

srcset/sizes属性やpictureタグを使ったレスポンシブイメージを解説 【Retina対応】background-imageを最適化する方法!

最適なサイズを表示する方法は、上の記事で詳しく紹介しています。コーディングの中では中級者向けの内容ですが、覚えておいた方が良いことです。

  1. HTMLを記述する
  2. CSSを記述する
  3. JavaScriptを記述する

この流れで紹介します。

JavaScript(jQuery)を使ってローディングを実装してみる

  • 10秒以内で読み込みが完了した場合、そのままローディングを終了
  • 10秒経過した場合、強制的にローディングを終了

このような仕様で作ります。

ユーザーの環境によっては読み込みまでに時間がかかる場合があります。その際は途中でローディングを切り上げるようにします。

はじめに、DEMOをご覧ください。

※ 今回のDEMOはローディングを導入する必要がないくらい、ファイル容量は小さいので、ローディングはすぐ終わっていまします。

HTMLを記述する

<div class="loading js-loading">
    <img src="img/loading-logo.png" alt="">
</div>

ローディングに関係のあるHTMLはこれだけです。

CSSを記述する

.loading{
  width: 100vw;
  height: 100vh;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
}

.loading img{
  width: 100px;
}

.loadingは、ローディング画面の領域です。width: 100vw, height: 100vhを指定し、画面いっぱいに表示されるようにします。

flexboxを使ってロゴを上下左右中央に配置しています。

ローディング中は、ローディング画面以外のコンテンツを見せたくないので、position: fixedを利用し、固定配置しています。

注意!
kvの高さを100vhにしていますが、実際はspのアドレスバーを考慮し、JavaScript側で高さを取得し指定します。

JavaScriptを記述する

//読み込みが完了したら実行
$(window).on('load',function () {
  // ローディングが10秒以内で終わる場合、読み込み完了後ローディング非表示
  endLoading();
});

//10秒経過した段階で、上記の処理を上書き、強制終了
setTimeout('endLoading()', 10000);

//ローディング非表示処理
function endLoading(){
  // 1秒かけてロゴを非表示にし、その後0.8秒かけて背景を非表示にする
  $('.js-loading img').fadeOut(1000, function(){
    $('.js-loading').fadeOut(800);
  });
}

少し長いので、分割して紹介します。


//ローディング非表示処理
function endLoading(){
  // 1秒かけてロゴを非表示にし、その後0.8秒かけて背景を非表示にする
  $('.js-loading img').fadeOut(1000, function(){
    $('.js-loading').fadeOut(800);
  });
}

まずは「ローディングの非表示処理」から紹介します。

endLoading関数はfadeOutを使用し、ロゴと背景を時間差で非表示にしています。fadeOutメソッドは引数の設定が可能で、この引数を利用し、「ロゴを1秒かけ非表示にし、その後0.8秒かけて背景を非表示にする」といった時間差処理を実装します。


//読み込みが完了したら実行
$(window).on('load',function () {
  endLoading();
});

読み込みが完了した際の処理です。

windowオブジェクトに対して、onメソッドを指定しています。onメソッドの第一引数には、イベントを指定することが可能です。loadを指定することで、読み込み完了後、第二引数の処理を行うことになります。

したがって、読み込み完了後にendLoading関数(ローディング非表示処理)が呼び出され、ローディングが終了するといった流れです。


//10秒経過した段階で、強制終了
setTimeout('endLoading()', 10000);

10秒経過した際の強制終了処理です。

setTimeoutメソッドを使用して、10秒後にendLoading関数を呼び出し、ローディングを終了させます。

setTimeoutメソッドは、一定時間後に一度だけ指定した処理を行うものです。第一引数に実行したい関数、第二引数に待機時間を指定します。

この処理がないと、読み込みに20秒かかればその20秒間はローディングが表示された状態になります。ローディングは長くても10秒以内に抑えたいのでこの処理を入れています。

【駆け出しの方へ】独学に限界を感じてませんか?

プログラミングやデザインは独学可能ですが、ほとんんどの方が苦戦します。

↓このように感じていませんか?

  • 何をどこまで勉強すれば良いかわからない...
  • 自分の書き方が正しいかわからない...
  • 検索しても解決しない問題が多い...
  • 転職や副業するまでの道が見えない...

そんな問題を解決するために、模写修行やこのメディアを作ったエンジニア/デザイナー中心に、メンタリングサービスHello Mentorを始めました。

スクールのような大金は必要ありません。高額な費用は払いたくないけど、プロのサポートが欲しい方は、ぜひ下記のリンクからサービス詳細をご覧ください。

※ 少人数運営のため人数制限あり ※

詳しいサービス内容を見る

転職・独立成功者も出ています!

👆 メンターは全員現役エンジニア 👆

ローディングアイコン作成サイト紹介

ここで紹介するサイト以外にも便利なサイトはあるので、興味のある方は調べてみてください。

👇 CSSで自作する場合の参考記事も載せておきます。

ローディングが使われているサイト紹介

ローディングが使われているサイトを紹介します。

映出目的でローディングを導入しているサイトも多いので、ギャラリーサイトを見るとローディングが使われているサイトはたくさん見つかります。

歯科ホームページ作成【BE PROUD】

歯科ホームページ作成【BE PROUD】

サイトのイメージに合った、凝ったローディングを導入しています。

株式会社八百彦本店

株式会社八百彦本店

ローディング時にメッセージを表示しているサイトはよくあります。

84.Paris

84.Paris

少し長めですが、可愛いローディングです。

独学に限界を感じていませんか?

現役エンジニアによるメンタリングサービス作りました!

模写修行やこのメディアを作ったエンジニア中心に、メンタリングサービスHello Mentorを運営しています。

👇 こんな方のためのサービスです。

  • 独学に限界を感じている...
  • 何をどこまで勉強すれば良いかわからない...
  • 自分の書き方が正しいかわからない...
  • 検索しても解決しない問題が多い...
  • 転職や副業のアドバイスが欲しい...

メンターを務めるのは、今も現役でコードを書いているエンジニアのみです。駆け出しの方やメンターだけをやっている方はいません。

高額な料金はかかりません。サブスク&入会金・解約料なしなので、リスクなく始められます。

少しでも興味がある方は、ぜひ下記のリンクからサービスサイトをご覧ください。個別説明会もお気軽にお越しください。(無理な営業等一切ございません!)

※ 少人数運営のため人数制限あり ※

詳しいサービス内容を見る

転職・独立成功者も出ています!

この記事を書いた人

Tatsukiのアイコン

Tatsuki

空間コーディネーターから独学でプログラミングを学びwebの世界へ。コーディングが好き。普段はHTML・CSS / JavaScript / Reactを主に書いています。

当メディア運営メンバーでメンターやってます!👉

詳しく見る

\Share/

模写修行のトップページのスクリーンショット
模写修行

実務レベルを体験するためのコーディング練習教材