blog

紫陽花

Railsの画像遅延ロードにはlayzr.jsがいいぞ

Webサービスのパフォーマンスを向上させるために表示する画像の遅延ロードを実現したい!
そんなときにオススメなlayzr.jsを紹介します。筆者は実際にプロダクトに実装しました。

画像の遅延ロードをすることで得することは?

読み込み速度が速くなったり通信量も制限できてサーバー代なども微量ながら抑えることができるかなと思います。

環境

Ruby 2.3
Rails 5
ES6
layzr.js ver ^2.0

layzr.js

GitHub
github.com

紹介サイト
http://callmecavs.com/layzr.js/callmecavs.com

A small, fast, and modern library for lazy loading images.

画像遅延ロードに関するライブラリはいくつか存在しますが、
layzr.jsは速さ軽さに重点をおいたjQueryのライブラリです。

ダウンロード

Layzr.js : http://callmecavs.github.io/layzr.js/

<script src="layzr.js"></script>

CDN

<script src="https://cdn.jsdelivr.net/layzr.js/2.0.2/layzr.min.js"></script>

npm

npm install layzr.js --save

layzr-rails

github.com


今回Railsアプリに実装するにあたってlayzr-railsというGemをinstallします。
layzr-rails自体にはJS周りのコードは含まれていません。
これはViewHelperのimage_tagを拡張してくれるGemで、
以下のようにlazy: trueにすることによって遅延ロードを可能にしてくれます。
Rails5でも問題なく動作することを確認しています。

<%= image_tag "kittenz.png", alt: "OMG a cat!", lazy: true %>

Equals:

<img alt="OMG a cat!" data-normal="/images/kittenz.png" src="/assets/some-default-image.png">

実装

layzr.js

import Layzr from 'layzr.js'

const instance = Layzr();
 
 instance.on('src:after', element => {
   if(!element.hasAttribute('data-layzr-bg')) return;
   element.style.backgroundImage = `url("${ element.getAttribute('data-normal') }")`
   element.removeAttribute('src');
   element.removeAttribute('data-layzr-bg');
 })

 document.addEventListener('DOMContentLoaded', () => {
   instance.update().check().handlers(true)
 }, false);
View  
import Layzr from 'layzr.js'

ここでライブラリを読み込みます。
instanceを作成

optionがいくつか設けられています。
src:before や src:afterにコールバックを定義できます。

instance.on('src:after', element => {
    // ...
})

.on('src:after', image => {
    // ...
})

上記ではsrc:afterに処理を定義してCSSのbackgroundImageをsrcの読み込みの後に画像がセットされるようにしています。
src:afterとあるようにinstanceの処理が終わった後に実行される処理です。


[注意]
他にもいくつかLayzr.jsに関する紹介記事がGoogle検索をすると見つかりますが、
紹介されたlayzr.jsのバージョンが古く2.0.0以降で廃止された機能なども存在するので気をつけて下さい。


on-ze.com

・data-layzr-bg
・data-layzr-hidden
・data-layzr

このような属性は2016/10現在では削除された機能です。
GitHubのissueなどを覗くと廃止された機能の現在での対応方法が紹介されていたりするのでそこを見に行きましょう。

github.com




身についたことなど

  • 画像遅延ロード 良い
  • layzr.js 良い
  • 自分で作ろうかとも思ったらlayzr-railsというhelper拡張Gemを有志が実装し既にGithubに公開されていて良かった。助かりました!
  • ライブラリの変遷を終えた(issueなどもちゃんと見て現状の仕様を把握する癖がつき始めた)
  • もっとES6のことが知りたくなった