ページスクロールに合わせて画像を読み込む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 のボイスブック (オーディオブック) サービス。人気作家のベストセラーから名作まで、ビジネス書・自己啓発書・現代文学・ライトノベル・洋書など約 40 万冊がラインナップ。

月額 1,500 円の会員になって 12 万以上のタイトルを聴き放題で楽しむことができるほか、各タイトルを単品購入することも可能。

聴き放題の対象はオーディオブックやニュース番組、トーク・お笑いを含むポッドキャストなど。Audible だけのオリジナル作品やオリジナルポッドキャストも配信。

本は、聴こう。Audible で聴き放題。