Railsの画像遅延ロードにはlayzr.jsがいいぞ
Webサービスのパフォーマンスを向上させるために表示する画像の遅延ロードを実現したい!
そんなときにオススメなlayzr.jsを紹介します。筆者は実際にプロダクトに実装しました。
画像の遅延ロードをすることで得することは?
読み込み速度が速くなったり通信量も制限できてサーバー代なども微量ながら抑えることができるかなと思います。
layzr.js
紹介サイト
http://callmecavs.com/layzr.js/callmecavs.com
A small, fast, and modern library for lazy loading images.
画像遅延ロードに関するライブラリはいくつか存在しますが、
layzr.jsは速さと軽さに重点をおいた非jQueryのライブラリです。
CDN
<script src="https://cdn.jsdelivr.net/layzr.js/2.0.2/layzr.min.js"></script>
npm
npm install layzr.js --save
layzr-rails
今回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以降で廃止された機能なども存在するので気をつけて下さい。
・data-layzr-bg
・data-layzr-hidden
・data-layzr
このような属性は2016/10現在では削除された機能です。
GitHubのissueなどを覗くと廃止された機能の現在での対応方法が紹介されていたりするのでそこを見に行きましょう。