WordPress:jQuery lazy load plugin導入覚書き

あちこちで見かける

スクロールに応じてふわっと画像を読み込むjs。

 

ページの読み込みも若干早くなるとのことなので試しに導入。

2013/10 ページの読み込みが早くなるとの情報で導入していましたが、体感的にページ読み込み時、なんとなく「スクロールの感覚がカクカクしてる」なーっと思っていました。
最近、よく覗くウェブシュフさんの【Wordpress高速化日記】.htaccessの書き換え効果絶大、Lazy Load系プラグインの停止、SNSボタン削減も効果あり のエントリーを読んで停止を決意。
後に、ゆめぴょんのさんの【WordPressまとめ】高速化はSEO対策に!17のブログ表示速度アップ術 も読んで確信。カクカク感が全くなくなって”スクロールの感覚がおかしかった”感じがなくなって良かったと思います。
ほんとに、思い切って減らす選択も時には必要ですねー

wordpress用にプラグインがあるので導入自体は簡単ですが・・・

発生した問題点と解決法

①サイドバーやフッターなどの画像(バナーなど)には適用させたくない

jquery-image-lazy-loading/jq_img_lazy_load.phpを編集
<script type="text/javascript">
jQuery(document).ready(function($){
  if (navigator.platform == "iPad") return;
  jQuery("img").lazyload({
    effect:"fadeIn",
    placeholder: "$placeholdergif"
  });
});
</script>

 

赤色部分に「適用させる箇所のクラス名(もしくはID)をプラス。

EX)

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

 

②jQueryベースのプログラムなのでprototypeベースのLightbox2ががっちり?衝突。

テーマのheader.phpを編集。

<?php wp_head()?>の下あたりに

<script>jQuery.noConflict();var j$ = jQuery;</script>

 

を挿入。

 

上記の設定、クラス名追加の部分、プラグインのアップデートでデフォルトに戻る模様。

One comment Add yours

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA