プラグイン無しでWordPressの画像をスクロールに応じて遅延読み込みする方法

jQueryによる画像の遅延読み込みについて調べていたら、Lazy Load Plugin for jQueryというのを見つけました。

ページを読んでみると、Wordpressテーマなどでも利用できそうだったので、試しに実装してみたら、うまくいったので、その方法の紹介です。

photo by David Urbanke

Lazy Load Plugin for jQueryとは

Lazy Load Plugin for jQueryとは、スクロールに応じて画像を遅延読込させるjQueryのプラグインです。

Lazyという単語には、怠惰な、けだるい、のろいという意味があります。ページ読み込み時に、画像読み込みを怠けるという意味で、こういった名前が付いているのだと思います。

ただ、怠けるといった意味のあるLazyですが、この画像を読み込みを怠けてくれるおかげで、ページ表示が速くなります。

スクロールなどでブラウザ上に画像が表示される時に初めて読み込まれるので、画像が多いページなどでは、ページ表示を高速化する働きがあります。

主なカスタマイズ手順

主なカスタマイズ手順は、以下のようになります。

プラグインをダウンロード＆設置
IMGタグにプラグイン用のタグを取り付ける
プラグインの呼び出しと実行コードを書く

テンプレートファイル2ヶ所にコピペするだけで実装できるようになっています。

ダウンロード＆設置

まずはダウンロードです。

Lazy Load Plugin for jQueryから、「jquery.lazyload.min.js」ファイルをダウンロードします。

ダウンロードは、ページの一番下の「minified」リンクから右クリックなどでダウンロードします。

ダウンロードしたら、「jquery.lazyload.min.js」ファイルを、テーマ（or 子テーマ）直下にコピーしてください。

ファイルの場所はどこでも良いですが、説明の簡略化のためフォルダ直下で説明します。

あとついでに、遅延する前に表示するダミー画像として1×1pxのダミー画像を設置します。

画像は以下に作成しましたので、これをダウンロードして、テーマ（or 子テーマ）直下の「images」フォルダ内にコピーしてください。

遅延前に表示するダミー画像（PNG圧縮済）

IMGタグに属性などを追加

Lazy Loadプラグインを利用するには、以下のようにIMGタグに「data-original」という「遅延読みする画像のURL」を指定した属性を追加してやる必要があります。

通常Wordpressで使用している画像はかなり多いので、すべてのIMGタグに手動でそういった属性をつけるわけには行きません。ですので、functions.phpなどでIMGタグが呼び出される前にフックして、タグの付け替えをしてやる必要があります。

//画像タグにLazyLoad用の属性などを追加
function add_image_placeholders( $content ) {
    //プレビューやフィードモバイルなどで遅延させない
    if( is_feed() || is_preview() || ( function_exists( 'is_mobile' ) && is_mobile() ) )
        return $content;

    //既に適用させているところは処理しない
    if ( false !== strpos( $content, 'data-original' ) )
        return $content;

    //画像正規表現で置換
    $content = preg_replace(
        '#<img([^>]+?)src=[\'"]?([^\'"\s>]+)[\'"]?([^>]*)>#',//IMGタグの正規表現
        sprintf( '<img${1}src="%s" data-original="${2}"${3} data-lazy="true" /><noscript><img${1}src="${2}"${3} /></noscript>', get_template_directory_uri().'/images/dummy.png' ),//置換するIMGタグ（JavaScriptがオフのとき用のnoscriptタグも追加）
        $content );//投稿本文（置換する文章）

    return $content;
}
add_filter( 'the_content', 'add_image_placeholders', 99 );
add_filter( 'post_thumbnail_html', 'add_image_placeholders', 11 );
add_filter( 'get_avatar', 'add_image_placeholders', 11 );

本文表示前、サムネイル表示前、アバター表示前にフックをしてIMGタグを入れ替えています。

※子テーマでカスタマイズしている場合は、「get_template_directory_uri()→get_stylesheet_directory_uri()」に変更してください。

これらの関数に関しては、「WordpressプラグインのLazy Load」を参考にさせてもらいました。

参考 WordPress › Lazy Load « WordPress Plugins

プラグインの呼び出しと実行コードを書く

最後に、Lazy Loadプラグインスクリプトの呼び出しと、実行コードを記述します。

記述場所は、header.phpの中の<head></head>内に記述してください。</head>手前あたりでよいと思います。

記述するコードは以下です。

<!-- jQuery呼び出し（必要な場合のみ） -->
<?php //wp_enqueue_script('jquery');//jQueryが読み込まれないテーマの場合は利用?>
<!-- Lazy Load jQueryプラグインの呼び出し -->
<script src="<?php echo get_template_directory_uri(); ?>/jquery.lazyload.min.js" type="text/javascript"></script>
<!-- Lazy Loadプラグインの実行 -->
<script type="text/javascript">
    jQuery(function() {
        jQuery('img').lazyload({
        effect : "fadeIn",
        //threshold : 200,//画像を遅延読込する閾値（例：200に設定すると画像がブラウザ画面に入る200ピクセル手前で読込開始
        //event : scroll/click/mouseover,//遅延読込を発生させるイベント
    });
    });
</script>

書いてある内容としては、以下の3つです。