• ブログTOP
  • AI・ディープラーニング
  • AR
  • VR
  • WEBサイト
  • WEBマーケティング
  • SEO
  • SNS
  • その他
  • お問い合わせ

ALAKI株式会社

COZIKEEいつまでも使えるTech情報発信ブログ

リクルートサイトはこちら >

遅延読み込みでWebページを高速化!jQuery Lazy Loadの使い方

2018年2月16日

  • このエントリーをはてなブックマークに追加

みなさんこんにちは!
デザイナーの伊東です。

一生懸命作ったWebサイトがめちゃくちゃ重い!
デザイナー・コーダーのみなさんなら、そんな悩みを一度でもお持ちになったことだと思います。

表示速度が遅いのには、容量の大きい動画を配置していたり、数万pxのボリュームのあるページだったり、様々な理由があると思います。

今回はそんなお悩みを解決する方法の一つとして、「画像の遅延読み込み」という方法をご紹介します。
昔からよく知られた技術ですが、実は「SEOに不向きだ」という意見も数多くありました。
しかしGooglebotの技術向上により、その不安は解消されつつあるようです。

読み込んでいる画像の数が多いサイトの場合、非常に有効な手段だと思いますので、ぜひお試しください。

この記事の目次

  • 1 遅延読み込みとは
  • 2 jQuery Lazy Loadの使い方(基本編)
    • 2.1 ダウンロードと読み込み
    • 2.2 imgタグの設定
    • 2.3 Lazy Loadの実行
  • 3 jQuery Lazy Loadの使い方(応用編)
    • 3.1 threshold
    • 3.2 event
    • 3.3 effect
    • 3.4 skip_invisible
    • 3.5 placeholder

遅延読み込みとは

遅延読み込みという技術は、Webサイトに表示される画像を一度に読み込まず、必要に応じて必要な分だけ読み込むというものです。不必要な画像の読み込みを後回しにして、画像以外のCSSやJSファイルの読み込みが先に行われます。そうすることで、表示速度を速くすることができます。

jQuery Lazy Loadの使い方(基本編)

遅延読み込みを実装するにあたり、一番ポピュラーな”Lazy Load”というjQueryプラグインをご紹介します。
Lazy Loadは、読み込みを遅延させたい画像を一旦ダミー画像にすり替えて、表示させるタイミングで本物の画像に差し替えるという動きをします。
画像が差し代わるタイミングは、デフォルトでは画像がブラウザの表示領域内に入った時です。

実装はとてもシンプルで、比較的用意に遅延読み込みの仕組みを取り入れることができます。

それでは、設定方法やオプションなどを詳しく見ていきましょう。

ダウンロードと読み込み

以下のページからダウンロードできます。
(以前は公式サイトからダウンロードできたのですが、現在はgithubからダウンロードする形になっているようです)
https://github.com/tuupola/jquery_lazyload

まずはjQueryと、ダウンロードしたlazyload.jsを読み込みます。
これで前準備は完了です。

1
2
<script src="http://code.jquery.com/jquery-●●●●.min.js"></script>
<script src="js/jquery.lazyload.min.js"></script>

imgタグの設定

次に遅延読み込みさせたい画像の設定を行います。
特定のimgタグに、以下のようにclassとプロパティを設定します。

1
<img src="images/dammy.jpg" class="lazy" data-original="images/example.jpg">

“lazy”というclassがついたimgタグに対してLazy Loadを適用していきます。
data-originalというプロパティで、実際に読み込む画像を指定します。
src属性には、画像が読み込まれる前に表示させておくダミー画像を設定します。

実は、lazyload.jsにはダミー画像を自動的に生成するプログラムが組み込まれています。なのでsrc属性の指定はなくても表示上は問題ないのですが、imgタグにsrc属性を指定しないとW3Cのチェックに引っかかってしまうので、上記の形をオススメします。

Lazy Loadの実行

それではいよいよlazyload.jsを実行していきます。
先ほどのJSファイルを読み込ませた記述の後に、以下のソースを記述します。

1
2
3
$(function($){
  $("img.lazy").lazyload();
});

これだけで基本的な遅延読み込みの設定は完了です。
とても簡単です!

jQuery Lazy Loadの使い方(応用編)

ここからはより高度な遅延読み込みの設定をご紹介します。

threshold

画像が読み込まれるタイミングをずらすことができます。
マイナスの値を大きくすればするほど、読み込まれるタイミングは遅くなっていきます。

1
2
3
4
5
$(function() {
    $('img.lazy').lazyload({
        threshold: -200
    });
});

event

通常、Lazy Loadが発動するタイミングは画像が表示領域に入った時ということを先ほどご説明しました。
このオプションを使えば、他のイベントに対して画像を表示させることができます。
下記の例では、指定した領域がクリックされた時にJSが動くようになっています。
クリックイベントの他にはマウスオーバーイベントなどに対応しているようです。

1
2
3
4
5
$(function() {
    $('img.lazy').lazyload({
        event: 'click'
    });
});

effect

画像が表示される時のエフェクトを設定することができます。
“effect_speed”を合わせて指定することで、エフェクトの速さもコントロールすることができます。

1
2
3
4
5
6
$(function() {
    $('img.lazy').lazyload({
        effect : 'fadeIn',
        effect_speed: 2000
    });
});

skip_invisible

通常であれば”display:none;”になっている画像に対してもLazy Loadは発動します。
このオプションを有効にしておけば、そもそも非表示になっている画像に対してはLazy Loadは効かなくなります。
細かいことかもしれませんが、不必要なJSの動きを控えて、さらに軽量化を後押ししてくれます。

1
2
3
4
5
$(function() {
    $('img.lazy').lazyload({
        skip_invisible: true
    });
});

placeholder

画像表示前に見せておくダミー画像をオプションとして指定することも可能です。
個別に設定する場合は、先ほどご説明したようにsrc属性で指定する形になります。

1
2
3
4
5
$(function() {
    $('img.lazy').lazyload({
        placeholder: 'images/dummy.jpg'
    });
});

 

いかがだったでしょうか。
画像を多用しているサイトにとってはなくてはならないプラグインだと思います。
他のプラグインと比べて比較的導入も簡単だと思うので、まだ使ったことがない方はぜひ一度試してみることをオススメします。

  • ツイート
  • このエントリーをはてなブックマークに追加

You may also like...

  • スクリーンショット 2018-02-01 23.59.43

    Creative Cloud Extractを使ってPSDからCSSを自動生成!コーディングを効率化する方法

    2 2月, 2018

  • 068ebcafb2d7bde01bdb4b6e267788fa_s

    .gitignorがないのにファイルがコミットできないときの対処方法

    26 3月, 2018

  • 2b56af4cae58a76b18979a678f6a8a4b_m

    レスポンシブ対応時にクリックイベントが、うまく動作しない時の対処法

    23 2月, 2018

デザイナー募集
プログラマー募集
  • Next story 第4回「ALAKI ◯◯Lab」を2018年3月9日(金)に開催します!
  • Previous story Webサイトチェックツール「QUWASY」が海外対応しました!

運営会社

ALAKI株式会社 ALAKI株式会社採用サイト

弊社サービス

MUGHEN ALAKI クラウド型受発注システム さよなら過去のAR。WebARがイベント集客に革命を起こします。 広報活動の課題を数字で可視化し、出願者数アップをお手伝いします クリエイティブ業務のコミュニケーションを高速化 Webの知識が無くてもWebサイトの品質をチェックできます。

人気の記事

  • kelly-sikkema-cXkrqY2wFyc-unsplash

    未分類

    デザインのアイディア出しのコツ

    14 10月, 2020

  • smartphoneIMGL0042_TP_V

    仕事術

    ディレクターさん必見!ディレクション歴10年の現役Webディレクターが意識しているディレクションのコツ

    30 9月, 2020

  • AdobeStock_76103803-min

    WEBサイト

    Webサイトのサーバー移管時の注意点

    24 9月, 2020

  • グループ 10

    AR

    AR導入検討時に必見!【AR大全】〜用途別ARの特徴から導入のすすめまで〜

    17 9月, 2020

  • CK0I9A9050_TP_V4

    Google AdWords / WEBマーケティング / 未分類

    リスティング広告における、「キーワード マッチタイプ」の選び方と改善アプローチ方法

    9 9月, 2020

カテゴリー

  • AI・ディープラーニング
  • AR
  • BtoB
  • CMS
  • Git
  • Google AdWords
  • gulp
  • Laravel
  • Photoshop
  • Pug
  • Sass
  • SEO
  • SNS
  • Twitter広告
  • VR
  • WEBサイト
  • WEBマーケティング
  • YouTube
  • コーディング
  • システム開発
  • スマートフォンサイト
  • セキュリティ
  • セミナー
  • その他
  • ツール
  • デザイン
  • ベトナムレポート
  • 仕事術
  • 未分類
  • 色

アーカイブ

  • 2020年10月
  • 2020年9月
  • 2020年8月
  • 2020年6月
  • 2019年6月
  • 2019年5月
  • 2019年4月
  • 2019年3月
  • 2019年2月
  • 2019年1月
  • 2018年12月
  • 2018年11月
  • 2018年9月
  • 2018年8月
  • 2018年7月
  • 2018年6月
  • 2018年5月
  • 2018年4月
  • 2018年3月
  • 2018年2月
  • 2018年1月
  • 2017年12月
  • 2017年11月
  • 2017年10月
  • 2017年9月
  • 2017年8月
  • 2017年7月
  • 2017年6月
  • 2017年4月
  • 2017年3月
  • 2017年2月
  • 2017年1月
  • 2016年12月
  • 2016年11月
  • 2016年10月
  • 2016年9月
  • 2016年8月
  • 2016年7月
  • 2016年6月
  • 2016年5月
  • 2016年4月
  • 2016年3月
  • 2016年2月
  • 2016年1月
  • 2015年12月
  • 2015年11月
  • 2015年10月
  • 2015年9月
  • 2015年7月
  • 2015年3月
  • 2015年2月
  • 2015年1月
  • 2014年12月
  • 2014年11月
  • 2014年10月
  • 2014年9月
  • 2014年8月
  • 2014年7月
  • 2014年6月
  • 2013年10月
  • 2013年9月

Facebook

お問い合わせ

お問い合わせ

人気の記事

  • デザインのアイディア出しのコツ
  • ディレクターさん必見!ディレクション歴10年の現役Webディレクターが意識しているディレクションのコツ
  • Webサイトのサーバー移管時の注意点
  • AR導入検討時に必見!【AR大全】〜用途別ARの特徴から導入のすすめまで〜
  • リスティング広告における、「キーワード マッチタイプ」の選び方と改善アプローチ方法

カテゴリー

  • AI・ディープラーニング
  • AR
  • BtoB
  • CMS
  • Git
  • Google AdWords
  • gulp
  • Laravel
  • Photoshop
  • Pug
  • Sass
  • SEO
  • SNS
  • Twitter広告
  • VR
  • WEBサイト
  • WEBマーケティング
  • YouTube
  • コーディング
  • システム開発
  • スマートフォンサイト
  • セキュリティ
  • セミナー
  • その他
  • ツール
  • デザイン
  • ベトナムレポート
  • 仕事術
  • 未分類
  • 色

検索

ALAKI株式会社 © 2021. All Rights Reserved.