雑記ブログ：画像をLazyloadさせる
Closedfirst published: 2018/12/19last updated: 2019/01/15
画像大きくないし必須じゃないけど、Reactで実装したことがないのもあり、練習がてらGatsbyにLazyloadを入れてみることにした。
Gatsby公式
gatsby-image を使うのが一般的らしいけど、Gyazoから引っ張ってる画像に適応されなかった。調べたら、Uploadcareなどリモート画像に対しては処理できないっぽい話が。
headlessCMS使ってるし、ローカルに画像を置いてGitでプッシュするのは面倒なので他の手段探すことにした。
lazysizes
良さそうなプラグインが見つからず、普通の静的サイト制作に使っているライブラリを使えないか確認。
Reactで使う場合はコンポーネント化しないで、専用のプラグインを併用して実装してほしいとのこと。了解。
ビルドエラーを回避
ローカルでは実装できたけど、Netlifyでビルドしたらコケた。
window オブジェクトに対する処理が書かれているから、ビルド時に回避させる設定をしないとエラーになると。Vueでもよくあるやつ。
しかし、そこに書かれていたのはwebpackの古い書き方だったので、まだコケる。現在の書き方に直してビルド。
Lazyload 完成！
前に作った ZoomImage のコンポーネントの src を data-src に変え、CSSでフェードを作ったら完成！