2016/12/03

lazyloadの使い方をDemoを見て納得!!画像遅延読み込みでサイトの最適化。

サイズの大きな画像や多くの画像を掲載してるとサイトが表示されるまでに時間がかかり、ユーザーの離脱やSEOの評価が下がってしまいます。

この問題を解決してくれるのがjQueryのLazyloadです。

Lazy loadはサイトスクロールのタイミングで順次、画像を読み込み表示します。

ここでは代表的なLazy loadの使い方と設定をDemoを用いてご紹介していきます。

実装イメージ

サイトにLazy loadを実装するとこんなイメージで画像が読み込まれます。

lazyload

Lazy loadの取得

以下のGitHubよりlazy loadを取得して下さい。

  • tuupola/jquery_lazyload

    画面右下のDownLoad ZIPクリックすると

    lazyload一式がダウンロードされます。


ダウンロードした圧縮ファイルを解凍するとたくさんのファイルがありますが基本的に使用するファイルはひとつのみです。

jQueryが実装されていないサイトの場合、組み込む必要があります。以下のサイトからダウンロードする!?またはCDNでjQueryを読み込んでください。ダウンロードを行う場合にはDownload the compressed, production jQuery 2.X.Xの最新版をクリック。

jQuery 2.x.xダウンロード

Download jQuery | jQuery

GoogleのCDN

Lazy loadの使い方

jquery.min.jsとjquery.lazyload.min.jsを読みこんでjavascriptでプログラムを記述し、画像の遅延読み込みを行わせるimgタグに指定classと属性を追記すると実装されます。

ここから具体的な実装方法を4つご紹介していきます。

BASIC

アニメーションのない根本的な実装方法です。

HTML

imgタグにclass=”lazy”を追加し、src属性をdata-originalに変更する。

javascript

以下のコードをbodyの終了タグ前に追記する。読み込むjavascriptファイルのパスはそれぞれの環境に合わせて修正して下さい。

Demo basicを見る

fadein

スクロールするとフェードインで画像が表示される使い方です。

HTML

BASICと同じでimgタグにclass=”lazy”を追加し、src属性をdata-originalに変更します。

javascript

以下のコードをbodyの終了タグ前に追記する。読み込むjavascriptファイルのパスはそれぞれの環境に合わせて修正して下さい。

BASICとの違いはeffectにfadeinを指定し、effect_speedに3秒(3000ms)を指定しました。

3秒かけてじわっとフェードイン表示がされます。

Demo fadeinを見る

TIMEOUT

スクロールすると5秒アウトで画像が読み込まれて表示される実装方法です。

HTML

BASICと同じでimgタグにclass=”lazy”を追加し、src属性をdata-originalに変更する。

javascript

以下のコードをbodyの終了タグ前に追記する。読み込むjavascriptファイルのパスはそれぞれの環境に合わせて修正して下さい。

BASICとの違いはeventにsportyを指定し、タイムアウトのjavascriptコードが追加されています。

Demo timeoutを見る

scrollstop

スクロールが停止したタイミングで画像が読み込まれる実装です。

HTML

BASICと同じです。

imgタグにclass=”lazy”を追加し、src属性をdata-originalに変更します。

javascript

以下のコードをbodyの終了タグ前に追記する。読み込むjavascriptファイルのパスはそれぞれの環境に合わせて修正して下さい。

BASICとの違いはjquery.scrollstop.min.jsが新規で読み込まれているのとeventにscrollstopが指定されていることです。

Demo scrollstopを見る

ローディング画像を追加する

画像が読み込まれる前に表示する画像を指定することができます。私はローディングGIFを設定しました。

ローディングGIFは以下のサイトで作成しました。

Loader Generator

Lazy Loadが動かいない原因

画像が表示されない、アニメーションがされない原因について考えられるものを紹介します。

私もミスをして同様の現象が発生しました。

ファイルパスが間違っている

jquery.min.jsやjquery.lazyload.min.jsのファイルパスが間違っていると画像が表示されません。

記述の順番が間違っている

htmlファイルに記述する順番は、

1.jquery.min.js
2.jquery.lazyload.min.js
3.javascript

となります。

この順番が違うとlazy loadは動きません。

imgタグに指定の記述がされていない

imgタグにはlazyクラスとdata-originalを指定する必要があります。この記述がされていないとlazy loadの処理は対象の画像ファイルだと認識できません。

Lazy Loadのオプション

Demoで紹介させて頂いた以外にもオプションがあるのでまとめておきます。

Threshold

画像を遅延読込する閾値。

以下の例ではスクリーンに表示される200px手前で画像の読み込みを開始します。

event

引数に設定された値によってイベントを発生させます。

引数:click

クリックされたタイミングで画像を読み込みます。

引数:mouseover

画像の上をマウスオーバーされたタイミング画像を読み込みます。

引数:sporty

指定タイムアウトで画像を読み込みます。

effect

画像がアニメーションで表示されます。

引数:show

デフォルト値。
スクロールしてスクリーンに画像の表示位置が来たタイミングで表示されます。

引数:fadeIn

フェードインしながら画像が表示されます。

effect_speed

エフェクトに時間を指定することができます。以下の例では3秒かけてフェードイン表示がされます。

公式サイト

  • Lazy Load Plugin for jQuery

    Lazy Loadの使い方

(Visited 2,470 times, 1 visits today)