Railsでの画像遅延読み込みはRails + lozad.jsがいい感じ

lozad.jsは非jQueryの画像遅延読み込みのためのライブラリ

lozad.js(githubt)はコチラ github.com

(1) とりあえず軽い

他の画像遅延(長いのでlazyload)ライブラリに比べるとjsのコードも200行未満とかなり軽い。実際にコードをおって処理を読むのも苦ではなかった。

(2) Railsに限らず使いやすい

非jQueryであるということ、またHTMLに特定の属性、クラスを追加すれば使えることから、Rails以外にも使いやすいと思う。

使い方：Railsの場合はlozad.js + 独自helper のセットが無難

Railsでフロントはhamlやslimで書いている場合、単にlozad.jsを入れるだけでは残念ながらダメ。helperで、独自の lazyload_image_tag みたいなのを作って、それを使う必要がある。

例えばこんな感じ

LAZYLOAD_DEFAULT_CLASS = 'lozad lazyload lazyload-wrap'

def lazy_image_tag(source, options={})
    options['data-src'] = asset_path(source)

    if options[:class].blank?
      options[:class] = LAZYLOAD_DEFAULT_CLASS
    else
      options[:class] = "#{LAZYLOAD_DEFAULT_CLASS} #{options[:class]}"
    end


    image_tag('lazy-dummy.jpg', options)
  end

lazy-dummy.jpg は読み込み中に表示するdummy画像なのでなんでも大丈夫。

classは最低 lozad があればlozad.jsがセレクターとして .lozadを探しに行ってくれる。

そして、使うときは

= lazy_image_tag item.image, class: 'hoge'

という感じで、先ほど作成したhelperを参照して、image_tag のように使えばOK。

初期設定で気をつけたこと

• TypeScriptをいれている場合、そのままでは使えない。@types/lozadもあわせていれてあげる必要がある。

• 念のためDOMContentLoaded以降に初期化させるようにした。

application.ts

import lozad from 'lozad'
import onEnter from '~/core/onEnter'

onEnter(() => {
  const observer = lozad()
  observer.observe()
})

古いGemには気をつける

ちなみに、他のライブラリに対応したGemもあったけど、最新commitが2,3年前と古かったのでやめました。lozad.jsに対応したGemがあればhelperいらないのだが...。