ページスクロールに合わせて画像を読み込む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

Amazon セール・キャンペーン

Amazonチャージ初回購入で最大 2,000 ポイントもらえる

Amazonの買い物なら、Amazonギフト券を使うのがお得。Kindle本の購入にも使えるAmazonギフト券(チャージタイプ)は、現金で5,000円以上の残高を追加するたびにポイントが貯まります。

通常会員なら最大2%、プライム会員なら最大2.5%がポイント還元。

今なら初回購入で最大2,000ポイントがもらえる。

Amazonギフト券チャージ : 初回チャージで最大2,000 円分ポイントがもらえる

Kindle Unlimited 読み放題

「Kindle Unlimited」は、月額 980 円で小説やコミック、ビジネス本、実用書、雑誌など幅広いジャンルの電子書籍が読めるサブスクサービス(定額制読み放題サービス)。初めての方は30日間無料体験。体験期間中にいつでもキャンセルでき、途中でキャンセルしたら料金はかかりません。

Kindle Unlimited を無料体験

Amazon Music Unlimited

「Amazon Music Unlimited」は月額 780 円(Amazonプライム会員の場合。一般会員は月額 980 円)から利用できる、6,500 万曲以上を楽しめるサブスクサービス(定額制音楽配信サービス)。初めての方は 30 日間無料体験。体験期間中にいつでもキャンセル・プラン変更でき、途中でキャンセルしたら料金はかかりません。

一部楽曲は Ultra HD 対応、より高音質な「Amazon Music HD」もプラス1,000円で聴ける。

Amazon Music Unlimited

Amazonパントリー おまとめボックス

食料品や日用品を、ひと箱にまとめて1回で受け取れる。いつもの買い物の手間を減らせる「Amazonパントリー」を、すべてのAmazonユーザーが利用可能に。買い物がお得になる割引クーポンなども配布。

Amazonパントリー 対象商品をチェック