ページスクロールに合わせて画像を読み込むWordPressプラグイン、『jQuery Image Lazy Load WP』を導入 & 設定時のコツ

ページをスクロールすることで画像を読み込んでくれるWordPressプラグイン、『jQuery Image Lazy Load WP』を導入してみました。ページを読み込む際のサイズが小さく済むので多少表示が軽くなったかなと思います。

導入はらくちん

『jQuery Image Lazy Load WP』はインストールして有効化するだけで完了するので大変便利なプラグイン。しかし、単に有効化しただけだとページ全体の画像に適用されてしまいまいました。

それでいいサイトもあるのでしょうが、サイドメニューの画像までスクロールで読み込まれるようになってしまうため、管理人の意図通りに表示されないことも。

遅れて読み込まれるならまだしも、読み込まれないまま止まってしまうこともあり、一旦使用をストップ。スクロールによる読み込みを、変えることが出来ないものかと調べてみたら、ありました。ありがとうございます。

jQuery Image Lazy Load WPの導入方法

1. プラグインの新規追加から「jQuery Image Lazy Load WP」を検索しインストール
2. プラグインの有効化

基本はここで終了しますが、当ブログの場合は「memocarilog」さんの記事を参考に、プラグインを編集して使用しています。

1. プラグイン→プラグイン編集から「jquery lazy load plugin」を選択
2. 「jquery-image-lazy-loading/jq_img_lazy_load.php」を選択
3. 27行目辺りの下の箇所を書き換える

<script type="text/javascript">
jQuery(document).ready(function($){
  if (navigator.platform == "iPad") return;
  jQuery("img").not(".cycle img").lazyload({
    effect:"fadeIn",
    placeholder: "$placeholdergif"
  });
});
</script>

「jQuery(“img”)」部分にメインコンテンツ部のIDである#content を付け足して「jQuery(“#content img”)」に。追加するidやclassは各ブログやテンプレートによって変わってくるでしょうが、うちのテンプレートの場合はこれで意図通り記事部分のみにプラグインの効果を反映させることができました。万歳！

スクロールした時点で画像を読み込むようにするWpプラグイン-jQuery Image Lazy Load WP | memocarilog