ページスクロールに合わせて画像を読み込む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は各ブログやテンプレートによって変わってくるでしょうが、うちのテンプレートの場合はこれで意図通り記事部分のみにプラグインの効果を反映させることができました。万歳!

share

耳で聴く読書 Audible

Audible (オーディブル) は、プロの声優や俳優などナレーター陣による朗読で本を聴ける、Amazonグループのボイスブック (オーディオブック) サービス。ベストセラー小説やビジネス書、自己啓発、洋書、童話・児童書、落語、講演など、様々なラインナップが揃っています。

初回登録後、最初の1冊は無料 (2か月目以降は月額1,500円で毎月1冊購入、その後は30%オフ価格で作品購入可能)。

会員期間中は、追加料金なしで楽しめるAudibleステーションも利用できます。

本は、聴こう。Audibleで最初の1冊を無料で体験。