HexoでLazyLoadが動かないので修正した
この記事は約4 分で読めます。
目次
LazyLoadが動かない、Hexoブログに移行してからずっとこの現象に悩んでいました。
プラグインを一部自作（カスタマイズ）するなど試行錯誤の末、なんとかLazyLoadによる画像遅延読み込みを再現できましたので、記事に残しておきます。
結論を先に書くと、プラグインを使わずに純粋なjavasccriptで画像遅延読み込みを再現しました。
LazyLoadにも色々なバージョンやプラグインの種類があって、とっかえひっかえ試していたのですが、動かないのはもちろん、動いても他のプラグインとの相性が悪かったりして、コレだ！という解決策がありませんでした。
プラグインとの相性でいうと、Lightboxなど画像を扱うプラグインの動作がおかしくなります。
そこでプラグインを使わないピュアなjavascriptで解決するに至ったわけですが、この問題解決策は当ブログ専用的なところもありますので、悩まれている方のヒントになればと思います。
LazyLoadは何を使うか？
javascriptのLazy Load 2.xを使います。
プラグインではありません。Javascriptを直接Hexoに読み込みます。実行もピュアなJavascriptです。
Lazy Load 2.xのダウンロード先：
このソースは発展途上らしく、機能はまだ乏しいらしいですが、遅延処理さえしてくれればOKです、このブログ的には。
Javascriptの読み込み
1<script src="https://cdn.jsdelivr.net/npm/lazyload@2.0.0-rc.2/lazyload.js"></script>
2
3とか
4
5<%- js('js/lazyload2-0-0') %>
6
7とか
8
9<%- partial('js/lazyload2-0-0') %>
</body>直上でスクリプトを読み込みます。
imgタグの修正
1<img class="lazyload" src="img/example-thumb.jpg" data-src="img/example.jpg">
class=“lazyload”：画像遅延読み込みの対象は
lazyloadクラスのimgが対象となります。src：実際の画像を表示するまでの小さな画像（ローディング中gif画像など）のパスを書きます。data-src：実際の画像のパスを書きます。他のスクリプトやプラグインですとdata-originalだったりしますので注意してください。
投稿ページ中の画像にclassやdata-srcをあてる
マークダウン記法でimgを記述するときはです。
これをLazyLoadのためだけに<img class="lazyload" src=hogehoge・・・と書くのは控えめに言って面倒です。
そこで、独自の記法を作ってもいいのですが、それも面倒でしたので、Hexoシステムを直接書き換えました。
この方法はHexo（モジュール）がバージョンアップされると、元に戻ってしまいますので、注意が必要です。
ただ、修正箇所はごく僅かですので、覚えておけば全く問題ありません。
ということで、/ブログプロジェクト/node_modules/marked.jsを編集していきます。
1var out = '<img src="' + href + '" alt="' + text + '"';
2
3↓ 修正
4
5var out = '<img class="lazyload" data-src="' + href + '" alt="' + text + '" src="/images/loading.gif"';
class="lazyload"を追記srcをdata-srcに修正src="/images/loading.gif"を追記
（loading.gifはロード中を表すgif画像ですので適当に拾ってきてください。）
これだけです。
マークダウンで書いたimg全てに適用されますので、必要に応じてclassを付加したり、条件分岐してみてください。
LazyLoadが動いた
今までのソースをまとめると、
1<img class="lazyload" src="img/example-thumb.jpg" data-src="img/example.jpg">
2
3・・・
4
5<script src="https://cdn.jsdelivr.net/npm/lazyload@2.0.0-rc.2/lazyload.js"></script>
6<script>lazyload();</script>
7</body>
新しく<script>lazyload();</script>が出てきましたが、これにより.lazyloadクラスの画像を遅延読込するようになります。
純粋なJavascriptで動かしていますね。
まとめ
GoogleのPageSpeed Insightsでオフスクリーン画像の遅延読み込みの警告が出ていない状況だったので、LazyLoadが動いているのかなとも思ったのですが、どうも動作を見ていると遅延表示していないように感じていましたので、平成最後の日に頑張って解決しました。
今は、画像読み込み前に一瞬ローディング画像が表示されるので、確かに画像の遅延読み込みが動いているとわかります。
上記以外にも、関連記事や人気記事のサムネイルも同じような感じで直接該当のプラグインを修正しました。
LazyLoadは他のjQueryとの相性が悪いとの話も聞きますので、jQueryを使わないLazy Load 2.xは解決策の一つになると思います。
さて、Hexoブログに移行してちょうど一ヶ月。色々勉強になりました。
そろそろブログの体裁は落ち着いてきましたので、明日から令和ですのでNode.jsアプリの開発に注力していこうと思います。