多くの画像を扱うサイト向け！後から画像を読み込む方法+WordPress対応

ハル

2017.03.02

おはこんばんにちは、ハルです。

自分の個人ブログサイトなどでも、多くの画像を使ったサイトを公開したい！　という方がいるかと思います。そうすると、初回読み込みが遅くなってしまいますよね。
そんな時に、Wordpressなどでも使える方法でページ読み込み後に画像を読み込む方法を紹介します。

ポイント

WordPressプラグインもあるが、今後カスタマイズも行えるように作る。
記事内の画像をHTMLドキュメントの読み込み・解析完了後に行いたい。

使用するライブラリ

ss 2017-01-12 11.21.11

今回は、こちらの、layzr.jsというライブラリを使って、処理をしていきたいと思います。

Github: https://github.com/callmecavs/layzr.js

準備

ダウンロード

https://github.com/callmecavs/layzr.js#download
Githubにダウンロードリンクがあります。そこから用意できます。

CDN

https://github.com/callmecavs/layzr.js#cdn
CDNも、Githubに記載がありますので今回はこちらを使っていきたいと思います。

HTML

まず最初に、HTMLのimgタグの用意の仕方についてです。
属性を書き換えることで、通常通りに画像が読み込まれるように用意します。

編集前のHTML

<img src="./images/s0.jpg" retina=".images/s0.jpg" srcset="./images/s0.jpg 1600w, ./images/s0-300x200.jpg 300w"/>

書き換え前のHTMLのimgタグは、上記のようなものだとします。

『src』は通常の画像読み込みパス
『retina』はレティナディスプレイ用の画像読み込みパス
『srcset』はレスポンシブ用の画像読み込みパス

としてパスを指定しているとします（この辺はHTMLの話なのでざっくり）。

編集後のHTML

<img data-src="./images/s0.jpg" data-retina=".images/s0.jpg" data-srcset="./images/s0.jpg 1600w, ./images/s0-300x200.jpg 300w"/>

上記コードのようにオリジナルのdata属性として、

『src』を『data-src』
『retina』を『data-retina』
『srcset』を『data-srcset』

のように、『data-XXX』のような形に書き換えます。
こうすることで、用意していくjavascriptが実行されるまでは、画像が読み込まれない状態になります。

JavaScript

ライブラリの読み込み

今回はCDNを使用するので、下記のコードをheadタグ内に記述します。

<script src="https://cdn.jsdelivr.net/layzr.js/2.0.2/layzr.min.js"></script>

JavaScriptを記述

ライブラリを読み込んだあとに、外部javascriptファイルなどを読み込ませて、下記のコードを用意します。

var layzr = Layzr({
    // オプション設定
    normal: 'data-src', // 通常画像パスの設定
    retina: 'data-retina', // retina画像パスの設定
    srcset: 'data-srcset', // レスポンシブ画像パスの設定
    threshold: 0 // 読み込み位置の調整数値
});

layzr.on('src:after', function (element) {
    // 画像の書き換えをした後
    element.classList.add('is-show'); // 今回はクラス名を追加してみました。
});

document.addEventListener('DOMContentLoaded', function () {
    // update() : 対象要素の更新
    // check() : 表示範囲内にはるか確認し実行
    // handlers() : スクロール・リサイズイベント時の発火 true
    layzr.update().check().handlers(true);
}, false);

各ブロックの説明をしていきます。

オプション指定

var layzr = Layzr({
    // オプション設定
    normal: 'data-src', // 通常画像パスの設定
    retina: 'data-retina', // retina画像パスの設定
    srcset: 'data-srcset', // レスポンシブ画像パスの設定
    threshold: 0 // 読み込み位置の調整数値
});

この部分でオプション指定し、実行します。
『normal・retina・srcset』の文字列を変更することで、属性名を変更できます。
『threshold』は、読み込みタイミングを数値で指定することができます。マイナス値も指定することができます。数値の値は、pxではなくvhなので注意してください。

画像読み込み後の追加処理

layzr.on('src:after', function (element) {
    // 画像の書き換えをした後
    element.classList.add('is-show'); // 今回はクラス名を追加してみました。
});

このライブラリでは、処理を追加することができます。
上記記述では、その対象画像に足してクラス名を追加してみました。

実行処理

document.addEventListener('DOMContentLoaded', function () {
    // update() : 対象要素の更新
    // check() : 表示範囲内にはるか確認し実行
    // handlers() : スクロール・リサイズイベント時の発火 true
    layzr.update().check().handlers(true);
}, false);

update()は、初期や、DOM構造が変わった場合に行う処理です。check()は、初回表示時表示範囲内にある要素の読み込み処理を実行する場合、追記してください。handlers(true)で、スクロール・リサイズイベント時に、表示領域内の画像読み込み処理を行ってくれます。

ここまでの完成サンプル

静的ページでのサンプルです。

WordPressでの実装について

次に、WordPressでの使い方です。
記事の内容のみ画像パスを変更することにします。そのような場合、下記の記述をfunctions.phpファイルに追記します。

function replace_img_src($content) {
	$list = array(
		'src=' => 'data-src=',
		'retina=' => 'data-retina=',
		'srcset=' => 'data-srcset='
	);
	return strtr($content, $list);
}
add_filter('the_content', 'replace_img_src', 999999);

上記記述例では、the_content()で記事本文を呼び出す部分に対して、strtr関数（http://php.net/manual/ja/function.strtr.php）を使い、『src・retina・srcset』を変換してみました。