画像の遅延読み込みでサイトを高速化、軽量で使いやすい「layzr.js」

layzr-top

公式サイト&デモ

最近のトレンドとして、縦に長く画像を大量に使うページが増えてきています。そこで問題となるのがページを開いた際に、大量の画像にアクセスし、全体の読み込みが遅くなる事。@callmecavsさんが開発した「layzr.js」を使えば、画像の位置までスクロールした時に、画像がロードされるので、ページのローディングが高速化します。

Lazy Loadの改良したLayzr.js

もともと画像の遅延読み込みはLazy Loadというjavascriptが有名でした。Layzr.jsは、Lazy Loadから最低限の機能だけを残しチューニングすることで、シンプルなソースの記述で、より軽量かつ高速な動きをするjsになっています。またRetina画像にも対応しているので、高解像度のモニターにも対応できます。

1.使い方

jsの読み込み

公式サイトよりjsをダウンロードし、サイトに読み込む

2.スクリプトを追加

bodyの最後に下記のスクリプトを記載する

3.画像のsrcを変更

遅延読み込みしたい画像のsrcをdata-layzrに変更する

iframeも遅延読み込みさせる事ができます。

これだけで完了です。Lazy Loadに比べると、半分くらいで実装できました。

その他のオプション

ローディング画像の設定

画像のsrcを記載する事で、遅延で読み込みが行なわれるまでの画像を設定できます。ローディング中などの画像を設定しておくと便利です。

Retina(高解像度)モニター用の画像を出力

「data-layzr-retina」を記載する事で、画面のピクセルレートが等倍以上の時に、retina用の画像を出力することができます。

背景の画像として出力

「data-layzr-bg」を記述する事で、background-image:として出力されます。読み込むimgに幅・高さを与えてください。

その他のオプションは作者である@callmecavsさんのGithubをご覧ください。
https://github.com/callmecavs/layzr.js

サイトを高速化する時のオススメ本


安定のO’Reillyさんの本。例にもよって堅実で安心できる内容です。

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

経営者と経営者の妻が沖縄で楽しく生きるためのアレコレ デザイン・カメラ・ロードバイク・旅・畑

© 2017 やまぐち家の生態