[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);

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

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