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

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

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

photo by David Urbanke

スポンサーリンク
レクタングル(大)広告

Lazy Load Plugin for jQueryとは

Lazy Load Plugin for jQuery

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

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

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

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

主なカスタマイズ手順

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

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

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

ダウンロード&設置

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

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

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

jquery.lazyload.min.jsファイルのダウンロード

ダウンロードしたら、「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つです。

  1. jQueryの呼び出し(任意)
  2. プラグインスクリプトの呼び出し
  3. プラグインの実行コード

実行コードには、遅延読み込みするときの「エフェクト」、「手前で読み込む閾値」、「読込のトリガー」などいろいろなオプションがあるので、詳しくはLazy Load Pluginページを参照してください。

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

これでカスタマイズは終了です。

動作確認

このようにカスタマイズをすることで、以下のようにスクロールすると画像が読み込まれるようになります。

遅延読み込み動作確認

遅延表示には、フェードインのエフェクトがかかっています。

その他にも、「画像がブラウザ画面に入る200ピクセル手前で読み込み開始」みたいな設定もすることができます。

まとめ

Lazy Load Plugin for jQueryを利用すると、このような感じで遅延読み込みをWordpressに実装することができます。

コードの中身を特に気にしないで編集するだけなら、ファイル2ヶ所にコピペするだけなので、結構簡単にできると思います。

ただ、こういった機能をつけたいなら、WordpressのLazy LoadjQuery Image Lazy Load WPプラグインなどを利用した方が手っ取り早いとは思います。

カスタマイズで行う利点としては、「呼び出し方法を変更したい」とか「エフェクトがいらない」とか「スクロールの結構前で読み込んでおきたい」なんて時には、ある程度自由が利くかと思います。

jQueryのLazy Loadプラグインに関しては、以下にも詳しい解説が載っています。

参考 スクロールに応じて画像を遅延読込させるLazy Loadプラグイン:CodeZine