[WordPress] jQuery不要の画像遅延ロード

画像の遅延ロードといえば、jQuery を使ったライブラリが有名だが、jQuery に依存しない仕組みを意識して作る必要がある。

遅延ロードライブラリ

Layzr.js

色々とjQueryに依存しないJavaScriptライブラリを探してみた。
試してみて個人的に良さそうだったのが、「Layzr.js」。

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

CDN もある。

<script src="https://cdnjs.cloudflare.com/ajax/libs/layzr.js/{version}/layzr.min.js"></script>

src の代わりに data-layzr を使う必要がある

<img data-layzr="image/source">

WordPressで使う

Layzr.jsでは、srcの代わりにdata-layzrを使う必要があるが、既にWordPressを運用している場合はsrcのはず。これを一つずつ変えていくのは骨だ。
SQLで置換する方法もあるが、一括置換はややリスクがあるし今後Layzr.jsの使用をやめる場合はもとに戻さなければならなくなる。

functions.phpでsrcをdata-layzrに変える

すぐに設定、元に戻せるようにfunctions.phpで処理する。

function replace_imagepage_to_src($content) {
  return str_replace( 'src=', 'data-layzr=', $content );
}
add_filter('the_content', 'replace_imagepage_to_src', 999999);

上記の処理を入れておくことで、既存のsrcがdata-layzrに変わるので、以下のように layzr.js を読み込むだけで遅延読み込みができるようになる。

<script src="layzr.js"></script>
<script>
window.addEventListener('load', function () {
  var layzr = new Layzr();
}, false);
</script>